create a new file called 'index.php' and paste following code below <body> tag
Include jQuery Library inside <head> tag
for jQuery effects above code looks little bit lengthy but actual code is :
that's it, here how you can easily submit forms using jQuery without Page Refresh, well this is just for beginners to show how forms data can be pass through the jQuery, we will see complete crud tutorial on jQuery CRUD very soon, hope you like it.
<div id="container">
<div id="form" class="result">
<form method="post" id="reg-form">
<table border="0">
<tr>
<td><input type="text" name="fname" id="lname" placeholder="First Name" /></td>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" placeholder="Last Name" /></td>
</tr>
<tr>
<td><input type="text" name="email" id="email" placeholder="Your Mail" /></td>
</tr>
<tr>
<td><input type="text" name="phno" id="phno" placeholder="Contact No" /></td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td align="center"><button type="submit">Register</button></td>
</tr>
</table>
</form>
</div>
</div>Include jQuery Library inside <head> tag
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>JQuery/JavaScript CODE :
$.ajax() function sends the data through the HTML form to submit.php with HTTP POST Request, and using ".serialize()" you can easily post data of forms, i have also added some effects to display user submitted details.<script type="text/javascript">
$(document).ready(function()
{
$(document).on('submit', '#reg-form', function()
{
//var fn = $("#fname").val();
//var ln = $("#lname").val();
//var data = 'fname='+fn+'&lname='+ln;
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'submit.php',
data : data,
success : function(data)
{
$("#reg-form").fadeOut(500).hide(function()
{
$(".result").fadeIn(500).show(function()
{
$(".result").html(data);
});
});
}
});
return false;
});
});
</script>Submit.Php
create a new file as "submit.php" and put the following code inside the file, it will accepts data via$.ajax() function and display the results on "index.php" file.<?php
if($_POST)
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$phno = $_POST['phno'];
?>
<table border="0">
<tr>
<td colspan="2">Succedd !!!</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td>First Name</td>
<td><?php echo $fname ?></td>
</tr>
<tr>
<td>Last Name</td>
<td><?php echo $lname ?></td>
</tr>
<tr>
<td>Your eMail</td>
<td><?php echo $email; ?></td>
</tr>
<tr>
<td>Contact No</td>
<td><?php echo $phno; ?></td>
</tr>
</table>
<?php
}
?>Do The Same With $.Post() Function.
Here's the code which can do the same as above using $.post() function<script type="text/javascript">
$(document).ready(function()
{
$(document).on('submit', '#reg-form', function()
{
$.post('submit.php', $(this).serialize())
.done(function(data)
{
$("#reg-form").fadeOut('slow', function()
{
$(".result").fadeIn('slow', function()
{
$(".result").html(data);
});
});
})
.fail(function()
{
alert('fail to submit the data');
});
return false;
});
});
</script>for jQuery effects above code looks little bit lengthy but actual code is :
$(document).on('submit', '#reg-form', function()
{
$.post('submit.php', $(this).serialize(), function(data)
{
$(".result").html(data);
});
return false;
});that's it, here how you can easily submit forms using jQuery without Page Refresh, well this is just for beginners to show how forms data can be pass through the jQuery, we will see complete crud tutorial on jQuery CRUD very soon, hope you like it.
Submit PHP Form without Page Refresh using jQuery, Ajax
No comments:
Post a Comment