for this tutorial i have created here a simple HTML form which will take some inputs from the user , first name, last name, email id and contact no, below form is in div tag which have id and class attributes to perform jQuery effects.
Simple HTML Form :
Simple HTML Form created with bootstrap so it looks better and some inputs i have used here to pass the entered values in another file via ajax.
<div id="form-content">
<form method="post" id="reg-form" autocomplete="off">
<div class="form-group">
<input type="text" class="form-control" name="txt_fname" id="lname" placeholder="First Name" required />
</div>
<div class="form-group">
<input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required />
</div>
<div class="form-group">
<input type="text" class="form-control" name="txt_email" id="lname" placeholder="Your Mail" required />
</div>
<div class="form-group">
<input type="text" class="form-control" name="txt_contact" id="lname" placeholder="Contact No" required />
</div>
<hr />
<div class="form-group">
<button class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Files we need
guys i have used bootstrap for the design so add the following style sheet and javascript files.
Add Bootstrap CSS file
<link rel="stylesheet" href="assets/css/bootstrap.min.css">Add JavaScript/jQuery files
<script src="assets/jquery-1.12.4-jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>Submitting Form via Ajax :
$.ajax() is a super and flexible method to pass the form values to another page by requesting back-end php file, so here in this example i have created submit.php file it will handles the ajax request silently with HTTP POST Request, and using “serialize()” you can easily merge data of forms.
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'submit.php',
type: 'POST',
data: $(this).serialize(), // it will serialize the form data
dataType: 'html'
})
.done(function(data){
$('#form-content').fadeOut('slow', function(){
$('#form-content').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});submit.php
as i said data will be posted via submit.php file, so here is the file with simple mixed php and html code and displayed within index file without page refresh, it will accepts data via $.ajax() call and display the results in “index.php” file.
<?php
if( $_POST ){
$fname = $_POST['txt_fname'];
$lname = $_POST['txt_lname'];
$email = $_POST['txt_email'];
$phno = $_POST['txt_contact'];
?>
<table class="table table-striped" border="0">
<tr>
<td colspan="2">
<div class="alert alert-info">
<strong>Success</strong>, Form Submitted Successfully...
</div>
</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
}Using $.post() : Ajax short hand method
Here is the short and simple code which can do the same as above using $.post() method. well it’s a ajax short hand method for submitting forms in short and simple way, have a look.
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.post('submit.php', $(this).serialize() )
.done(function(data){
$('#form-content').fadeOut('slow', function(){
$('#form-content').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});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.