Wednesday 27 April 2016

Form Submit with Fade Out Message using Jquery Ajax PHP



In this post you can learn about form submit with fade out message using Jquery Ajax in php. I have show you one example in which I have use two html form containing required field. In this example Ajax code will validate form and and send inputs to php. PHP code will insert that field data into database and respond back to Ajax function with success message and this message will fade in and out by using jquery.


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=1 ;  
 --  
 -- Dumping data for table `tbl_form`  
 --  

form_submit.php


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Multiple Image Upload</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:500px;">  
                <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" />  
                     <span id="error_message" class="text-danger"></span>  
                     <span id="success_message" class="text-success"></span>  
                </form>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#submit').click(function(){  
           var name = $('#name').val();  
           var message = $('#message').val();  
           if(name == '' || message == '')  
           {  
                $('#error_message').html("All Fields are required");  
           }  
           else  
           {  
                $('#error_message').html('');  
                $.ajax({  
                     url:"insert.php",  
                     method:"POST",  
                     data:{name:name, message:message},  
                     success:function(data){  
                          $("form").trigger("reset");  
                          $('#success_message').fadeIn().html(data);  
                          setTimeout(function(){  
                               $('#success_message').fadeOut("Slow");  
                          }, 2000);  
                     }  
                });  
           }  
      });  
 });  
 </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"]);  
      $sql = "INSERT INTO tbl_form(name, message) VALUES ('".$name."', '".$message."')";  
      if(mysqli_query($connect, $sql))  
      {  
           echo "Message Saved";  
      }  
 }  
 ?>  

14 comments:

  1. Hi hello I am shivam vishwakarma

    ReplyDelete
  2. thank's very nice
    can you increase timing of shaved message

    ReplyDelete
  3. Thank you sooo much the most expected one

    ReplyDelete
  4. thank u so much sir, always update more new tutorials thanks

    ReplyDelete
  5. Hello, i wrote the same code as it was in the video but the problem is that, the "Message Saved" doesnt displayed as it was supposed to,and the data are inserted successfully into the database,Need your Help plz

    ReplyDelete
  6. Great Tutorial... Just remember to put this code,
    $('#submit').click(function(e){
    e.preventDefault();

    during the line #submit click function. This code will prevent the form from making its default action of reloading the page after the submit button is clicked.

    ReplyDelete
  7. You´re the best. Simple demonstrations, extendible for own purposes, easy to convert in frameworks like codeigniter. Keep it up!

    Thanks for your work.

    ReplyDelete