Phone: 1-855-839-9966

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

Home » Web Design Updates » Here’s Help With jQuery, Submit Form, Stay On Page and Close Form Div
Share this article on Facebook Share this on Twitter Stumble this article Share this on Google+ Share this on LinkedIn

Posted by Dave Lauretti on November 23, 2016

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:

<script type="text/javascript">
	
		$(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()
			    });	    
			});	
		});
		
</script>

The Form code

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

<div id="first">
<form id="myform" name="myform" action="/process.php" method="post" class="review-feedback-form" enctype="multipart/form-data">
<p>First and Last Name *
<input id="fname" type="text" name="fname" value="" size="30" /></p>
<p>Enter Email *
<input id="email" type="text" name="email" value="" size="30" /></p>
<p><input id="hbutton" name="sendit" type="submit" value="Start Leaving Reviews!" /></p>
</form>			
</div>

<div id="second" style="display:none;">			
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>

Conclusion

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


Get A Call Back


Latest SEO News and Tips