Symphony.

Hello,

I have a newsletter signup form at the top of every page on my website.

This form only becomes visible when the user clicks a signup button, however.

To achieve this I am using jQuery. Here's the simplified version:

$(document).ready(function(){
    $('form#signup').show();    
});

The good news is that the form basically works and that the data is being sent to the backend upon submission.

The bad news, however, is that I can't seem to find a way to validate the form data before submission.

The HTML is fairly standard:

        <form id="signup" method="post" action="" enctype="multipart/form-data">
        <xsl:for-each select="events/subscribe">
            <p class="{@result}">
                <xsl:choose>
                    <xsl:when test="@result = 'error'">Please correct your input.</xsl:when>
                    <xsl:when test="filter/@status = 'failed'">
                        <xsl:attribute name="class">error</xsl:attribute>
                        <xsl:text>Data could not be sent.</xsl:text>
                    </xsl:when>
                    <xsl:otherwise>Data sent.</xsl:otherwise>
                </xsl:choose>
            </p>
        </xsl:for-each>
        <label>Name
          <input name="fields[name]" type="text" />
        </label>
        <label>E-mail
          <input name="fields[e-mail]" type="text" />
        </label>
        <input name="action[subscribe]" type="submit" value="Subscribe" />
    </form>

Can anybody tell me how to keep the form visible until @result has been given? Right now, the form simply disappears upon data submission, no matter if the data was entered in the correct format or not.

Thanks for any help!

I assume you are hiding the form first using jquery?

If the code looks something like this:

$(document).ready(function(){
    $('form#signup').hide();    
});

You could change this to:

$(document).ready(function(){
    $('form#signup:not(p)').hide();    
});

Which will only hide the form if there is no response in a p. You might want to add an id to the p, to make the selector a bit more specific, but the idea is the same.

Does this help?

Hello,

Thanks for your help. I tried what you told me, but to no avail.

This is what I have so far:

$(document).ready(function() {
$("form#signup:not(p)").hide();    
$("a.newsletter").click(function(evt) {
    evt.preventDefault();
    $("form#signup").show();    
});

$("#signup").submit(function(evt) {
    this.show();
});

});

The problem remains that the form completely disappears whenever I hit the Submit button. I can't find a way to give feedback to the user, i.e. display Symphony's @result.

How can this be done?

Where do you hide the form? Is it hidden using jQuery, or is it hidden in your css?

I think the issue you have is that when the page is submitted, it is being refreshed and then the jQuery is hiding the form. I've never had much luck with the :not selector, it's confusing.

As far as I know (untested) you'll need the following JavaScript

$(document).ready(function(){

    $("#signup:not(:has('p'))").hide();

    $("a.newsletter").click(function(evt){

        evt.preventDefault();

        $("#signup").show();
    });
});

Oh yes, I should have mentioned that. I have this in my CSS:

form#signup {display: none;}

@John: Thanks, just tried that. But works out the same, i.e. the form disappears whenever I hit Submit :-(

Well it will if you have that CSS in place...

Just use the JavaScript I provided to do the hiding, otherwise it will always be hidden as per your CSS.

Edit: The CSS is basically saying 'hide the form irrespective'. If you let the JS do it it is saying 'hide this ID if it doesn't have a p element child'.

If you're adamant that you want the CSS in there, you will have to do an if check in the JS. It would mean more code, and make it more cumbersome than the method Huib/I propose.

By the way, you should never hide something in css itself and later unhide it using javascript.

Because what happens if somebody does not have javascript enabled? They will not be able to submit the form at all! So, long story short, remove the JS and your original code should work (if it doesn't you might need some changes proposed by John).

EDIT: If you really, really need the CSS in place, you can also reverse the logic. In stead of saying: "hide if it does not contain a p" you should say: "show if it contains a p". Does that make sense?

Hi John,

I just removed the CSS bit and it seems you were right. It works!

It's already past midnight here, so I better call it a day and carry on tomorrow.

Will try to keep you posted.

Thanks a lot for your help so far!!

I would not show/hide based on the presence of a p element. I think a better option would be to use a class on the form. E.g. a class inactive: <form class="inactive" action=…" /> and toggle that classname on submission.

In your CSS you would add .inactive { display: none; }

Leave the class off the form by default and add it with Javascript onDomReady: $(function(){$("#signup").addClass('inactive');}) … this will hide the form on page load and prevent the accessibility issue with JS-off scenario: the form would be visible.

You could easily toggle the form when clicking the signup button using $('#signupbutton').click(function(){$("#signup").toggleClass('inactive')}); etc.

Submitting the form using JS (and AJAX) gives you the possibility to toggle again (with e.g. specific error/success messages).

When you submit the form (to the same page) without JS you can (also) check in your XSL for the presence of an event or message and toggle the classname with a <xsl:attribute name="class"…>.

Hey David,

This looks great, thanks a lot. I haven't found time yet to continue with this project but will do so very soon. I'll try to implement your idea then and see how it goes.

Cool, keep us updated (always nice for people landing here in the future)