Ask an SEO

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

Wednesday, November 23rd, 2016
1 min read

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.

Recent Articles

WooCommerce Script to Show Product Subcategory Thumbnails

As SEOs we want to take advantage of all the WooCommerce customization options available through custom coding so we can provide users with the best...

Dec 21, 2022

How To EASILY Track PDF Downloads & PDF Reads

Tracking PDF views in Google Analytics can involve an extremely complex setup using Google Tag Manager, but there is another easier way. To do this...

Jan 16, 2021

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Need Help with Your SEO Strategy?

Our team of SEO experts can help you implement effective strategies and optimize your website for better search engine performance.