How to submit form without refreshing page with jquery and ajax

May 2, 2011 | In: JQuery

This is very simple artical for submit HTML form data without refreshing page with the help of JQuery and Ajax.
jQuery provides a rich set of methods for AJAX web development.
With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.

$.ajax(options) is the syntax of the low level AJAX function.
$.ajax offers more functionality than higher level functions like load, get, and post.
The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.

Below is code for HTML form.

<form method="post" name="form">
	<ul>
		<li><input id="name" name="name" type="text" /></li>
		<li><input id="username" name="username" type="text" /></li>
		<li><input id="password" name="password" type="password" /></li>
		<li>
			<select id="gender" name="gender">
			<option value="">Gender</option>
			<option value="1">Male</option>
			<option value="2">Female</option>
			</select>
		</li>
	</ul>
	<div >
		<input type="submit" value="Submit" class="submit"/>
		<span class="error" style="display:none"> Please Enter Valid Data</span>
		<span class="success" style="display:none"> Registration Successfully</span>
	</div>
</form>


Javascript code for jquery ajax form submit

.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
	$(".submit").click(function() {
		var name = $("#name").val();
		var username = $("#username").val();
		var password = $("#password").val();
		var gender = $("#gender").val();
		var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
		
		if(name=='' || username=='' || password=='' || gender=='')
		{
			$('.success').fadeOut(200).hide();
			$('.error').fadeOut(200).show();
		}else{
			$.ajax({
			type: "POST",
			url: "result.php",
			data: dataString,
			success: function(){
				$('.success').fadeIn(200).show();
				$('.error').fadeOut(200).hide();}
			});
		}
		return false;
	});
});
</script>

Comments

comments

Powered by Facebook Comments

Related Posts



4 Responses to Change image on mouse hover effect with jquery

Avatar

web hosting

January 27th, 2013 at 6:43 am

Нellο thеre, I diѕсovеred уour
website by way of Googlе ωhіle seaгсhing for a similar matter,
yοuг ωеb site got here up, it aрpears
to be liκe grеat. I’ve bookmarked it in my google bookmarks.
Hello there, just changed into alert to your weblog via Google, and found that it’s really informatіvе.

I am gοing to bе сareful for bruѕsels.
I’ll be grateful if you proceed this in future. A lot of other people will be benefited out of your writing. Cheers!

Avatar

pay per click guide

January 30th, 2013 at 9:08 am

Tremendous issues here. I am very happy to see your article. Thanks a lot and I’m taking a look forward to contact you. Will you kindly drop me a e-mail?

Avatar

Wendell

March 6th, 2013 at 7:39 pm

hello!,I love your writing so so much! share we communicate more approximately your article on AOL?

I require an expert on this space to solve my problem.
Maybe that’s you! Having a look forward to look you.

Avatar

Article Spinner

May 26th, 2013 at 10:45 am

You made some really good points there. I checked on the internet for more info about the
issue and found most individuals will go along with your
views on this web site.

Leave a Reply

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

*


*

 

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>