Easy Codes To Submit A Form Without Refreshing Page With jQuery And Ajax

by

Here I will be showing you very simple tips for submitting HTML form values without refreshing page using jQuery and Ajax codes. Just input these codes and enrich your web applications easily.
Read Also:
1. How To Make a Calculator In Java With Source Code
2. Tutorial About Changing Design Colors With Jquery Codes
3. Java Source Code For Simple Animation Making With Swing

Submit a Form without Refreshing page with jQuery and Ajax

Form Without Refreshing Page With jQuery And Ajax

For making this form you need three type of programs JavaScript Code,  HTML Code,  join.php;

 JavaScript Code

jQuery and Ajax script take a look at dataString. Codes are below;

<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: “join.php”,
data: dataString,
success: function(){
$(‘.success’).fadeIn(200).show();
$(‘.error’).fadeOut(200).hide();
}
});
}
return false;
});
});
</script>

HTML Code

<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&gt;

Join.php

<?php
if($_POST)
{
$name=$_POST[‘name’];
$username=$_POST[‘username’];
$password=$_POST[‘password’];
$gender=$_POST[‘gender’];
mysql_query(“SQL insert statement…….”);
}else { }

?>

Just input the programs and enjoy this tutorial for about making a form with jQuery and Ajax. If you have any question of this post ask me via the comment section. Share it if you like with your buddies in social media.

Leave a Comment