Bootstrap/HTML Form with jQuery $.post - Submit Data Without Refresh

In this tutorial, I will show you how to use a Bootstrap or HTML form to submit data via the jQuery $post method.

The post method is used to load data by using the HTTP request. Along with specifying the source you may send data along with it.

Similarly, you may send data taken from a user in an HTML or Bootstrap form by using the post method and saving it to a database or using it to retrieve certain information without reloading the web page.

See the following demo where I entered dummy data and pressed the “Create Account” button.

I will explain how it is done by using $.post method after that:

HTML and Bootstrap:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>
$(document).ready(function(){
$("#postdata").click(function(){ 
    
postname=$("#postname").val();
postgender=$("#postgender").val();
postemail=$("#postemail").val();
postpass=$("#postpassword").val();
postaddress=$("#postaddress").val();


        $.post("post-forms.php", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){
        $("#postdiv").html(postresult);
        });

});
});
</script>

<style>
.formcls { 
    padding: 9px; 
    border: solid 1px #F0AD4E; 
    outline: 0; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #F7D19F), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #F7D19F 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 

    } 
#postdiv{
    margin-left: 50px;
    width:30%;
    background-color:#eee;
}   
</style>

</head>

<body>
<div class="container">
<h1>A demo of jQuery $.post and Bootstrap Form data</h1>
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label for="name1" class="col-sm-2 control-label">Name:</label>
        <div class="col-sm-4">
          <input type="text" class="form-control formcls" id="postname" placeholder="Enter Your Full Name">
        </div>
      </div>
      <div class="form-group">
        <label for="gender1" class="col-sm-2 control-label">Gender:</label>
        <div class="col-sm-2">
        <select class="form-control formcls" id="postgender">
          <option>Male</option>
          <option>Female</option>
        </select>          
          
        </div>
      </div>      
      <div class="form-group">
        <label for="email1" class="col-sm-2 control-label">Email:</label>
        <div class="col-sm-5">
          <input type="email" class="form-control formcls" id="postemail" placeholder="Enter Email">
        </div>
      </div>
      <div class="form-group">
        <label for="password1" class="col-sm-2 control-label">Password:</label>
        <div class="col-sm-3">
          <input type="password" class="form-control formcls" id="postpassword" placeholder="Password here">
        </div>
      </div>
      <div class="form-group">
        <label for="address1" class="col-sm-2 control-label">Address:</label>
        <div class="col-sm-5">
          <input type="text" class="form-control formcls" id="postaddress" placeholder="Full Address">
        </div>
      </div>            

    </form>
   </div> 
<div class="col-sm-offset-2 col-sm-5">   
<button id="postdata" class="btn btn-lg btn-block btn-warning">Create Account</button>
</div><br /><br /><br />
<div id="postdiv"><h3>You entered following data!</h3></div>
</body>
</html>

A little PHP code:

< ?php
//Remove the space in PHP tag
$post_name=$_POST["name"];
$post_gender=$_POST["gender"];
$post_email=$_POST["email"];
$post_password=$_POST["password"];
$post_address=$_POST["address"];

 
if( $post_name )
 
{
 
   echo "Name entered is: ". $post_name ."<br>";
   echo "Gender:" .$post_gender ."<br>";
   echo "Email:" .$post_email ."<br>";
   echo "Password:" .$post_password ."<br>";
   echo "Address:" .$post_address ."<br>";

 
}
?>

Here is the breakup of the code:

First of all, I created a Bootstrap form by using the Bootstrap framework CSS and its built-in classes. The CSS library is included in the head section of the code:

Not to mention, you also need to include the jQuery library in the head section.

Before going into the <script> section, let me describe briefly the presentation of the form.

The form is created by using the Bootstrap built-in classes, for example, it’s a horizontal form:

Different controls use various field sizes by specifying its class in the div that contains it, e.g.

      <div class="form-group">

<label for="name1" class="col-sm-2 control-label">Name:</label>

<div class="col-sm-4">

<input type="text" class="form-control formcls" id="name1" placeholder="Enter Your Full Name">

</div>

</div>

Finally, a button is used outside of the form closing tag. The reason is that I have called the $.post method at the click event of this button.

I also used a custom CSS class to style the form fields, which are also placed in the head section.

The code of jQuery is placed in the <head> section:

<script>

$(document).ready(function(){

$("#postdata").click(function(){



postname=$("#postname").val();

postgender=$("#postgender").val();

postemail=$("#postemail").val();

postpass=$("#postpassword").val();

postaddress=$("#postaddress").val();


$.post("post-forms.php", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){

$("#postdiv").html(postresult);

});


});

});

</script>

First of all, the data is assigned to the variables in the jQuery code.
After that, the $post method is used to specify the file where this data is sent.
Multiple data fields are enclosed in curly brackets and separated by commas.

$.post("post-forms.php", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){

Before going to the next line in the script, let me move to post-forms.php script file where the action is happening as the above line is executed:

First, the data sent by using $.post method is captured in PHP variables by using the $_POST array, that contains the data.

<?php

$post_name=$_POST["name"];

$post_gender=$_POST["gender"];

$post_email=$_POST["email"];

$post_password=$_POST["password"];

$post_address=$_POST["address"];

You can write the PHP script to save this information into a database like MySQL and return the success message. For the demo, I am simply printing the information by using PHP echo statement.

if( $post_name )

{

echo "Name entered is: ". $post_name ."<br>";

echo "Gender:" .$post_gender ."<br>";

echo "Email:" .$post_email ."<br>";

echo "Password:" .$post_password ."<br>";

echo "Address:" .$post_address ."<br>";

}

?>

The echo statement will not display any line by itself. This is returned data which is captured by the postresult in the success part of $.post function.

Again see these lines in <script> section:

$.post("post-forms.php", {name:postname, gender:postgender, email:postemail, password:postpass, address:postaddress },function(postresult){

$("#postdiv").html(postresult);

});

Finally, the postresult parameter is used in the $.html jQuery function to display the returned data in the specified div.

Note: If you do not include the Bootstrap library, the form will still work with $.post method. It will act as an ordinary HTML form. Just remove the redundant code in the form fields if you do not intend to use Bootstrap.

Related links: Bootstrap Forms | PHP echo statement

Learn More: