Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

Posted 8 years ago By Ajay Gupta 98200

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


<!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 class="row">
  <div class="col-md-offset-3 col-md-6">
     <div class="panel panel-primary">
    <div class="panel-heading">Submit PHP Form without Page Refresh using jQuery, Ajax</div>
      <div class="panel-body">   
        <div id="form-container">
            <form method="post" id="signup-form" autocomplete="off">
                        
                <div class="form-group">
                <input type="text" class="form-control" name="name" id="name" placeholder="Name" required />
                </div>
                            
                <div class="form-group">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Mail" required />
                </div>
                            
                <div class="form-group">
                <input type="text" class="form-control" name="mobile" id="mobile" placeholder="Contact No" required />
                </div>
                            
                <hr />
                            
                <div class="form-group">
                <button class="btn btn-primary">Submit</button>
                </div>
                        
            </form>   
         </div>  
        </div>
      </div>
    </div>
</div>
</body>
</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 class="row">
  <div class="col-md-offset-3 col-md-6">
 	<div class="panel panel-primary">
    <div class="panel-heading">Submit PHP Form without Page Refresh using jQuery, Ajax</div>
      <div class="panel-body">   
        <div id="form-container">
		    <form method="post" id="signup-form" autocomplete="off">
						
				<div class="form-group">
				<input type="text" class="form-control" name="name" id="name" placeholder="Name" required />
				</div>
							
				<div class="form-group">
				<input type="email" class="form-control" name="email" id="email" placeholder="Your Mail" required />
				</div>
							
				<div class="form-group">
				<input type="text" class="form-control" name="mobile" id="mobile" placeholder="Contact No" required />
				</div>
							
				<hr />
							
				<div class="form-group">
				<button class="btn btn-primary">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.

<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>

<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.

<?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 class="table table-bordered table-condensed table-hover table-striped">
    <tr>
        <td colspan="3">
            <div class="alert alert-info">
                <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>

<?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 class="table table-bordered table-condensed table-hover table-striped">
    <tr>
	    <td colspan="3">
	    	<div class="alert alert-info">
	    		<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:

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)
)
----------------------------------------------------------

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.

Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

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

Tags :

Related Posts

How to validate form in jQuery using jQuery Form Validator

Powerful jQuery Bootstrap Form Validation with Example

jQuery Select box search option with Chosen and Bootstrap Plugins example

Validate multiple email addresses in single input text example

How to create divided multi-scrolling pages using jQuery Plugins

jQuery How To Fix the “$ is not a function” Error Using noConflict

Add Remove input fields dynamically using jQuery

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

jQuery making custom right-click context menu example

jQuery - disable context menu right click, cut, copy and paste

jQuery remove query string parameter from url

Check and Uncheck all checkbox using jQuery Example

How to hide, show, or toggle your div with jQuery

How to select only one checkbox at a time in jquery example

How to get current url with or without query string example jQuery

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

How to add or update query string parameter to current url in Javascript

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Bootstrap datepicker example text input with specifying date format

jQuery - set am/pm format using jQuery timepicker Plugin with example

Bootstrap year picker example using datepicker js plugin

How to get client ip address in javascript of jquery?

How to count number of characters limit in textarea Javascript

jQuery Fullcalendar Integration with example

Loading Gravatar image from email using JQuery

Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL

Ajax Image Upload using PHP and jQuery Example Without Page Refresh with Validation

How to get local time from UTC using Moment.JS with example