Here’s Help With jQuery, Submit Form, Stay On Page and Close Form Div

Posted Wednesday, November 23rd, 2016 - 3,266 views

Not a problem because I’ve got your back. I’ve scoured a few web pages and found the perfect, and simple script that will use jQuery to submit a form, close the form, and stay on the page.

The very simple code

The code is below. You’ll see each section: the jQuery, and the form code. If you were to copy and past this into your HTML/Code editor, it would work, if you had an ready .php processor.

The jQuery code

Add the following code just above the code dealing with your divs and hidden divs:

$(document).ready(function() {
$("#myform").submit(function(event) {
$(‘#second’).show(‘slow’);$(‘#first’).hide(‘slow’);
event.preventDefault();
$.ajax({
url: $(this).attr(‘action’),
type: $(this).attr(‘method’),
data: $(this).serialize()
});
});
});

The Form code

Here is your form code. Edit it to your needs:

First and Last Name *

Enter Email *

This is your new div, you can do whatever you want to here. This section will display after your form has been submitted while the form disappears.

<div id="second" style="display:none;">Do stuff here</div>

Conclusion

This should work, but if you’re having issues, feel free to leave them in the comments below.