Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

In this post we will give you information about Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax. Hear we will give you detail about Submit PHP Bootstrap Form without Page Refresh using jQuery, AjaxAnd how to use it also give you demo for it if it is necessary.

Submit PHP Bootstrap Form into MySQL table without Page Refresh using jQuery, Ajax

AJAX (Asynchronous JavaScript and XML) is known as developer’s dream because while working with ajax, you do not need to reload page for update any module.

In this tutorial, i am going to tell you how to submit a simple php form without page refresh using jquery ajax and after submitting it will display you all records from database into html table.

Here, I have created a responsive bootstrap form which will take some inputs from you such as name,email and your contact no and insert these details into users table.

To insert into database table, i create a PDO object representing a connection to a database.


Simple HTML Form : ajaxsubmit.html

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>Submit PHP Form without Page Refresh using jQuery, Ajax</title>
  5. <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6. <scriptsrc="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  7. <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10. <divclass="row">
  11. <divclass="col-md-offset-3 col-md-6">
  12.     <divclass="panel panel-primary">
  13. <divclass="panel-heading">Submit PHP Form without Page Refresh using jQuery, Ajax</div>
  14. <divclass="panel-body">
  15. <divid="form-container">
  16.          <formmethod="post"id="signup-form"autocomplete="off">
  17.                         
  18.                 <divclass="form-group">
  19.                 <inputtype="text"class="form-control"name="name"id="name"placeholder="Name"required/>
  20.                 </div>
  21.                             
  22.                 <divclass="form-group">
  23.                 <inputtype="email"class="form-control"name="email"id="email"placeholder="Your Mail"required/>
  24.                 </div>
  25.                             
  26.                 <divclass="form-group">
  27.                 <inputtype="text"class="form-control"name="mobile"id="mobile"placeholder="Contact No"required/>
  28.                 </div>
  29.                             
  30.                 <hr/>
  31.                             
  32.                 <divclass="form-group">
  33.                 <buttonclass="btn btn-primary">Submit</button>
  34.                 </div>
  35.                         
  36.          </form>
  37.          </div>
  38.         </div>
  39.      </div>
  40.     </div>
  41. </div>
  42. </body>
  43. </html>
<!DOCTYPE html>
<html>
<head>
<title>Submit PHP Form without Page Refresh using jQuery, Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div >
  <div >
 	<div >
    <div >Submit PHP Form without Page Refresh using jQuery, Ajax</div>
      <div >   
        <div id="form-container">
		    <form method="post" id="signup-form" autocomplete="off">
						
				<div >
				<input type="text"  name="name" id="name" placeholder="Name" required />
				</div>
							
				<div >
				<input type="email"  name="email" id="email" placeholder="Your Mail" required />
				</div>
							
				<div >
				<input type="text"  name="mobile" id="mobile" placeholder="Contact No" required />
				</div>
							
				<hr />
							
				<div >
				<button >Submit</button>
				</div>
						
		    </form>   
		 </div>  
		</div>
	  </div>
	</div>
</div>
</body>
</html>


Ajax script to submit form

$.ajax() is a best way to pass form data to server.

In this script, i am sending form data using serialize() method to ajaxsubmit.php with HTTP POST Request.

  1. <script>
  2. $('#signup-form').submit(function(e){
  3. e.preventDefault();// Prevent Default Submission
  4. $.ajax({
  5.     url:'ajaxsubmit.php',
  6.     type:'POST',
  7.     data: $(this).serialize(),// it will serialize the form data
  8. dataType:'html'
  9. })
  10. .done(function(data){
  11.      $('#form-container').fadeOut('slow',function(){
  12.      $('#form-container').fadeIn('slow').html(data);
  13. });
  14. })
  15. .fail(function(){
  16.         alert('Ajax Submit Failed ...');    
  17. });
  18. });
  19. </script>
<script>
$('#signup-form').submit(function(e){
    e.preventDefault(); // Prevent Default Submission
    $.ajax({
	url: 'ajaxsubmit.php',
	type: 'POST',
	data: $(this).serialize(), // it will serialize the form data
        dataType: 'html'
    })
    .done(function(data){
	    $('#form-container').fadeOut('slow', function(){
	         $('#form-container').fadeIn('slow').html(data);
        });
    })
    .fail(function(){
		alert('Ajax Submit Failed ...');	
    });
});
</script>


ajaxsubmit.php

In this step, i create connection using PDO object and then insert form data into users table and then i list down all records of users table into tables.

  1. <?php
  2. $host="localhost";
  3. $user="root";
  4. $pass="admin";
  5. $dbname="testdba";
  6. try{
  7. $con=newPDO("mysql:host=$host;dbname=$dbname",$user,$pass);
  8. $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  9. }catch(PDOException $ex){
  10. die($ex->getMessage());
  11. }
  12. $name=$_POST['name'];
  13. $email=$_POST['email'];
  14. $mobile=$_POST['mobile'];
  15. $query="insert into users(name, email, mobile) values ('$name', '$email', '$mobile')";
  16. $stmt=$con->prepare($query);
  17. $stmt->execute();
  18. ?>
  19. <table class="table table-bordered table-condensed table-hover table-striped">
  20. <tr>
  21.      <td colspan="3">
  22.          <div class="alert alert-info">
  23.              <strong>Success</strong>, Form Submitted Successfully...
  24.          </div>
  25.      </td>
  26. </tr>
  27. <tr>
  28.     <th>#ID</th>
  29. <th>Name</th>
  30. <th>Email</th>
  31. </tr>
  32. <?php
  33. $query="SELECT id, name, email FROM users";
  34. $stmt=$con->prepare($query);
  35. $stmt->execute();
  36. while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
  37. extract($row);
  38. ?>
  39. <tr>
  40. <td><?phpecho$id;?></td>
  41. <td><?phpecho$name;?></td>
  42. <td><?phpecho$email;?></td>
  43. </tr>
  44. <?php
  45. }
  46. ?>
  47. </table>
<?php
 
 $host = "localhost";
 $user = "root";
 $pass = "admin";
 $dbname = "testdba";
 
 try{
  
  $con = new PDO("mysql:host=$host;dbname=$dbname",$user,$pass);
  $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
 }catch(PDOException $ex){
  
  die($ex->getMessage());
 }

$name=$_POST['name'];
$email=$_POST['email'];
$mobile=$_POST['mobile'];

$query = "insert into users(name, email, mobile) values ('$name', '$email', '$mobile')";
$stmt = $con->prepare( $query );
$stmt->execute();
?>
<table >
    <tr>
	    <td colspan="3">
	    	<div >
	    		<strong>Success</strong>, Form Submitted Successfully...
	    	</div>
	    </td>
    </tr>     
    <tr>
    	<th>#ID</th>
        <th>Name</th>
        <th>Email</th>
    </tr>      
   <?php
   $query = "SELECT id, name, email FROM users";
   $stmt = $con->prepare( $query );
   $stmt->execute();
   while ($row=$stmt->fetch(PDO::FETCH_ASSOC) ) {
    extract($row);
    ?>
                <tr>
                <td><?php echo $id; ?></td>
                <td><?php echo $name; ?></td>
                <td><?php echo $email; ?></td>
                </tr>
                <?php
   }
   ?>      
</table>

I suggest you to create seperate config file for database connection settings.


Database Design & Table

In this step, First create database if not exist then create table manually or you can create tables by running following MySQL query:

  1. CREATEDATABASE testdba;
  2. ----------------------------------------------------------
  3. CREATETABLEIFNOTEXISTS users(
  4. id int(10)NOTNULLAUTO_INCREMENT,
  5. name varchar(255)NOTNULL,
  6. email varchar(255)NOTNULL,
  7. mobile varchar(20)NOTNULL,
  8. PRIMARYKEY(id)
  9. )
  10. ----------------------------------------------------------
CREATE DATABASE testdba;

----------------------------------------------------------

CREATE TABLE IF NOT EXISTS users(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
mobile varchar(20) NOT NULL,
PRIMARY KEY (id)
)

----------------------------------------------------------

That’s it..Now you can post form without reloading page and display result in table using ajax.

Hope this code and post will helped you for implement Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  13  =  19

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US