Form is not submitting using ajax and php?

Question

I'm trying to submit a message to database by using a form, and I want that form to be submitted without refreshing.

I used Javascript Code for catching data from the form "JS" Code, coded in the same page of the form.

 $(document).ready(function(){ $('#submit').click(function(){ var typed_msg = $('#typed_msg').val(); if(typed_msg == '') { $('#error_msg').html("Message blank!"); } else { $('#error_msg').html(''); console.log(typed_msg); $.ajax({ url:"msg.php", method:'post', data:{typed_msg:typed_msg}, success:function(data){ $("form").trigger("reset"); $('#succ_msg').fadeIn().html(data); setTimeout(function(){ $('#success_message').fadeOut("Slow"); }, 2000); } }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" method="POST" style="padding:5px 0"> <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" > <input type="button" name="submit" id="submit" value="Go" class="btn btn-success" > </form>

PHP file I used to submit data to the database, "msg.php"

<?php
require_once('db.php');

 if(isset($_POST["typed_msg"]))  
 {  
      $typed_msg = mysqli_real_escape_string($con, $_POST["typed_msg"]); 
      $sql = "INSERT INTO messages (`time_send`,`sender_id`,`receiver_id`,`msg_body`) VALUES (now(),'".$_SESSION['id']."','$msgId','$typed_msg')";  
      if(mysqli_query($con, $sql))  
      {  
           echo "Message Saved";  
      }  
 } 


?>

Answer 1

Use this code

HTML form

<form action="" method="POST" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" id="submit" value="Go" class="btn btn-success" >
</form>

Script

 $(document).ready(function(){  
      $('#submit').click(function(){          
           var typed_msg = $('#typed_msg').val();   
           if(typed_msg == '')  
           {  
                $('#error_msg').html("Message blank!");  
           }  
           else  
           {  
                $('#error_msg').html('');  
                $.ajax({  
                     url:"msg.php",  
                     method:'post',  
                     data:{'typed_msg':typed_msg},  
                     success:function(data){  
                          $("form").trigger("reset");  
                          $('#succ_msg').fadeIn().html(data);  
                          setTimeout(function(){  
                               $('#success_message').fadeOut("Slow");  
                          }, 2000);  
                     }  
                });  
           }  
      });  
 });

Answer 2

You have to use event.preventDefault() to prevent hapening default action.

1. Using forms onsubmit event

<form action="" onsubmit="formSubmitted" method="POST" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" id="submit" value="Go" class="btn btn-success" >
</form>

2. Using onclick event.

<form action="" method="POST" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" onclick="formSubmitted" id="submit" value="Go" class="btn btn-success" >
</form>

<script>
    function formSubmitted(e){  
        e.preventDefault();
       var typed_msg = $('#typed_msg').val();   
       if(typed_msg == '')  
       {  
            $('#error_msg').html("Message blank!");  
       }  
       else  
       {  
            $('#error_msg').html('');  
            $.ajax({  
                 url:"msg.php",  
                 method:'post',  
                 data:{typed_msg:typed_msg},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#succ_msg').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#success_message').fadeOut("Slow");  
                      }, 2000);  
                 }  
            });  
       }  
    }
</script>

Answer 3

Html :

<form action="" method="POST" id="submit" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="submit" name="submit"  value="Go" class="btn btn-success" >
</form>

Script Submission :

$('#submit').submit(function(e){ 
       e.preventDefault();         
       var typed_msg = $('#typed_msg').val();   
       if(typed_msg == '')  
       {  
            $('#error_msg').html("Message blank!");  
       }  
       else  
       {  
            $('#error_msg').html('');  
            $.ajax({  
                 url:"msg.php",  
                 method:'post',  
                 data:{typed_msg:typed_msg},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#succ_msg').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#success_message').fadeOut("Slow");  
                      }, 2000);  
                 }  
            });  
       }  
  }); 

Answer 4

 $sql = "INSERT INTO messages (`time_send`,`sender_id`,`receiver_id`,`msg_body`) VALUES (now(),'".$_SESSION['id']."','$msgId','$typed_msg')";

where is this $msgId come from?

---

please check this link to check ajax error: jQuery ajax error function