show div on form submit with no redirect

Question

I'm using a WordPress sidebar widget to capture email addresses. The thing is, it redirects after form submission. I want the visitor to stay on the page they were on after form submission with just a hidden div giving a successful signup message.

I've tried something with javascript like this --

<script type="text/javascript">
function showHide() {    
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {      
div.style.display = 'none';
}
} 
</script>

And that works perfectly for showing the hidden div on submit, but the actual form then doesn't work :(

The form (with what I was trying to do) is like this --

<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>

<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p> 
</div>

The problem is coming in somewhere between 'return false' and the form action (which is where the plugin's coder has made it redirect I think). If I remove 'return false', it redirects. With 'return false' there, the form doesn't work. I can't figure out a way to get the form to work but not redirect, ie. just show the hidden div, work, and that's it! No redirect :) Would appreciate your help.

Answer 1

I will show how to submit the form with jQuery, as this is what you have available to you:

First of all, you should make one small change to the form HTML. Namely, change showHide() to showHide(this), which will give showHide() access to the form element. The HTML should be:

<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>

<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p> 
</div> 

The javascript to submit the form and display the div on successful submit is:

function showHide(form) { 
    var serial = $(form).serialize();
    $.post(form.action, serial, function(){
        $('#hidden_div').show();
    });
}; 

What this does:

1. Serializes the form data, i.e. converts it to one long string such as wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1 that is stored in serial.
2. Submits the serialized data to the the form's action url (form.action)
3. If the form submit was successful, it runs the success handler, which is the third parameter to $.post(). This handler takes care of displaying the hidden div. I changed the code to use jQuery's .show() function, which takes care of browser inconsistencies.

Hope this is helpful.