Friday, 10 June 2016

Insert Form data using Jquery Post Method with PHP Mysql

           , ,      1 comment   

This blog covers how can we insert form data into Mysql table using JQuery post method by using PHP programming language without page refresh. This method will loads a page from the server using a POST HTTP request. We can use JQuery Ajax method or Jquery Post method to communicate form data to php script. But here we have discuss JQuery post method and how can we use jquery post method to insert form data into mysql table by using php script without refreshing event of page. By using this method we can increase the speed of form submission data to server this is because here page is not refresh and data is submitted to server without any page refreshing event. So that speed of out web application will increase by using this JQuery post method of submit form data to server. In Current time most of the website is used this concept for submitting form data. This JQuery Post method call the php script and php script process the data and callback for success inserting of data to JQuery Post method. This way we can insert form data using JQuery post method. If you get more information regarding this, you can also show the video which you can find in this post.

Source Code

Table


 --  
 -- Table structure for table `tbl_form`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_form` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` text NOT NULL,  
  `message` text NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=27 ;  
 --  
 -- Dumping data for table `tbl_form`  
 --

post_method.php


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Insert Form data using Jquery Post Method with PHP Mysql</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:600px;">  
                <h3>Insert Form data using Jquery Post Method with PHP Mysql</h3><br />  
                <form id="submit_form">  
                     <label>Name</label>  
                     <input type="text" name="name" id="name" class="form-control" />  
                     <br />  
                     <label>Message</label>  
                     <textarea name="message" id="message" class="form-control"></textarea>  
                     <br />  
                     <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                </form>  
                <div id="response"></div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#submit').click(function(){  
           $('#submit').prop('disabled', true);  
           var name = $('#name').val();  
           var message = $('#message').val();  
           if(name == '' || message == '')  
           {  
                $('#response').html('<span class="text-danger">All Fields are required</span>')  
                $('#submit').prop('disabled', false);  
           }  
           else  
           {  
                $.post(  
                     'insert.php',  
                     $('#submit_form').serialize(),  
                     function(data)  
                     {  
                          $('form').trigger("reset");  
                          $('#response').fadeIn().html(data);  
                          $('#submit').prop("disabled", false);  
                          setTimeout(function(){  
                               $('#response').fadeOut("slow");  
                          }, 5000);  
                     }  
                );  
           }  
      });  
 });  
 </script>

insert.php


 <?php  
 //insert.php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if(isset($_POST["name"]))  
 {  
      $name = mysqli_real_escape_string($connect, $_POST["name"]);  
      $message = mysqli_real_escape_string($connect, $_POST["message"]);  
      $query = "INSERT INTO tbl_form(name, message) VALUES('".$name."', '".$message."')";  
      if(mysqli_query($connect, $query))  
      {  
           echo '<p>You have entered</p>';  
           echo '<p>Name:'.$name.'</p>';  
           echo '<p>Message : '.$message.'</p>';  
      }  
 }  
 ?>

1 comment: