Нужно отправить форму дважды, чтобы опубликовать правильно, используя JQuery AJAX

Question

Я пытаюсь отправить форму, используя jQuery AJAX.Я не очень хорош в этом коде, поэтому не могу видеть

Issue - почему мне нужно дважды отправить форму, чтобы опубликовать ее.

Когда я отправляю форму, текстовая область возвращается к тексту placeholder, и ничего не происходит.Когда я нажимаю на нее снова, сообщение отправляется и отображается.У меня есть следующие textarea и button

<textarea class="add-message-textarea" name="message_body" id="message_textarea" placeholder="Write message"></textarea>
<button class="post-button button" type="submit" name="post_message" id="message_submit">Post</button>

Когда я отправляю, у меня есть следующее:

$body = '';
if(isset($_POST['post_message'])) {

    if(isset($_POST['message_body'])) {
        $body = $_POST['message_body'];
    }
}

Затем вызов AJAX:

var userLoggedIn = '<?php echo $userLoggedIn; ?>';
var user_to      = '<?php echo $user_to; ?>';
var body         = '<?php echo $body; ?>'
// var body          = $("#message_textarea").val();

$(document).ready(function() {

    $("#message_submit").click(function(){

    //ajax request for send 'sending a new message' string to dB
    $.ajax({
        url: "includes/handlers/ajax_send_message.php",
        type: "POST",
        data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
        cache: true,

                success: function(response) {
                  console.log("message_sent");
                }

        }); 
    });
});

ajax_send_message.php выглядит так просто:

global $con;
if(isset($_POST['userLoggedIn']) && isset($_POST['user_to']) && isset($_POST['body'])) {

    $userLoggedIn = $_POST['userLoggedIn'];
    $body = $_POST['body'];
    $user_to = $_POST['user_to'];
    $date = date("Y-m-d H:i:s");


        $message_obj = new Message($con, $userLoggedIn);
        $message_obj->sendMessage($user_to, $body, $date);
}

Я могу заставить это работать без проблем, используя PHP с приведенным ниже, но я не хочу перезагрузить страницу.

if(isset($_POST['post_message'])) {

    if(isset($_POST['message_body'])) {
        $body = $_POST['message_body'];
        $date = date("Y-m-d H:i:s");
        $message_obj->sendMessage($user_to, $body, $date);
    }
}

Любая помощь приветствуется.

Answer 1

Если вы хотите отправить форму, но не хотите перезагружать страницу, вам просто нужно вернуть false после нажатия кнопки отправки:

$(document).ready(function() {

    $("#message_submit").click(function(){
   //ajax request for send 'sending a new message' string to dB
    $.ajax({
    url: "includes/handlers/ajax_send_message.php",
    type: "POST",
    data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
    cache: true,
    success: function(response) {
          console.log("message_sent");
         }

    });

    return false;

    });
});

Примечание. Если вы хотите полностью запретить использование формыотправлено, прикрепите прослушиватель событий к отправке формы, не нажимая кнопку.Пользователь может отправить форму, нажав Enter или другие непредсказуемые действия, связанные с клавиатурой устройства и т. Д.

$(YOUR_FORM).on("submit",function(){
  //Ajax code here
  return false;
})

Answer 2

Я думаю, проблема в том, что вы не препятствуете отправке вашей формы.Вы можете сделать это: e.preventDefault() в .submit(function(e){}) функции обратного вызова

$("#reg").submit(function(e)
{
  e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="reg">
  <input type="text" name="name" value="Rick">
  <input type="text" name="last_name" value="Astley">
  <input type="submit">
<form>