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";  
      }  
 } 


?>

Nothing happens with clicking a submit button, even no movement. — Junc Book, Feb 04 '20 at 07:31
you had already prevent the form when submit button is clicked ? — Qonvex620, Feb 04 '20 at 07:36
I didn't prevent the form, but just by hitting enter button. — Junc Book, Feb 04 '20 at 07:46
Your code is vulnerable to SQL injection. You should use prepared statements. — Dharman, Feb 04 '20 at 07:46
When you're having trouble, try to [reduce the problem to the simplest possible thing that reproduces the problem](https://stackoverflow.com/help/mcve). You say nothing happens when you click the button - [here's a much simplified JSFiddle of your code](https://jsfiddle.net/dont_panic/f2e1xtmo/) that shows something does happen, your JS is triggered fine. Do the same in your JS - does it work? If yes, move to the next step - check your devtools, is the POST actually sent? — Don't Panic, Feb 04 '20 at 09:18
you just don't start the session in the php file. So the query will fail since you don't have the value of the sender_id. — Lelio Faieta, Feb 04 '20 at 11:36

score 2 · Answer 1 · answered Feb 04 '20 at 11:15

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

score 0 · Answer 2 · answered Feb 04 '20 at 07:35

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

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>

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>

Thanks for helping, but still nothing happened, any comments? — Junc Book, Feb 04 '20 at 07:52
Which method have u used? Do not use both combined. write allert message in function to see if event is dispatching `formSubmitted` function. There's no way not to do that — Malkhazi Dartsmelidze, Feb 04 '20 at 08:00
I'm new to ajax, can you please describe in short words, which method do i have to use? plz if you have code — Junc Book, Feb 04 '20 at 08:02
I suggest to use first method above. When form will be submitted it definitely fires `formSubmited` function. — Malkhazi Dartsmelidze, Feb 04 '20 at 08:05

score 0 · Answer 3 · answered Feb 04 '20 at 11:55

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

score -1 · Answer 4 · edited Feb 04 '20 at 11:43

-1

 $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

edited Feb 04 '20 at 11:43

Lelio Faieta

6,457
7
40
74

answered Feb 04 '20 at 11:39

Sandeep

47
4

Form is not submitting using ajax and php?

4 Answers4