Форма не отправляется с использованием ajax и php?

Question

Я пытаюсь отправить сообщение в базу данных, используя форму, и хочу, чтобы эта форма была отправлена ​​без обновления.

Я использовал Javascript Код для сбора данных из формы "JS "Код, закодированный на той же странице формы.

 $(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 Файл, который я использовал для отправки данных в базу данных, "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

Используйте этот код

HTML Форма

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

Скрипт

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

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>

Представление сценария:

$('#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 3

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

откуда этот $ msgId?

---

проверьте эту ссылку, чтобы проверить ajax ошибка: jQuery ajax функция ошибки

Answer 4

Вы должны использовать event.preventDefault(), чтобы предотвратить затягивание действия по умолчанию.

1. Использование форм onsubmit событие

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

Использование события onclick.

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