Submit PHP Form without Page Refresh using jQuery, Ajax

In today's tutorial i am going to share the most useful jQuery functions $.ajax() and $.post(), using these two functions you can submit the PHP Web Forms without Refreshing the whole Web Page of Your Site, The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request, hence $.post() function is a Shorthand Ajax method, so this tutorial will guide you that how to use jQuery's $.ajax() and $.post() functions easily to submit PHP Form Data to the Server Web Page without Refreshing the Page, let's see it in detail.

 

Live Demo

Download Script

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.