In this tutorial, I will show you how to use a Bootstrap or HTML form to submit data via the jQuery $post method.
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.
Related links: Bootstrap Forms | PHP echo statement