Дублирование формы Ajax при отправке

Question

Итак, я пытаюсь создать приложение для чата, и я знаю, что люди уже задавали этот вопрос, но, похоже, это не решает мою проблему.

Я уже пытался добавить функцию beforeSend, но, похоже, это не решило проблему.

HTML-код:

<form method="post" id="message_form" action="insert_msg.php">
      <textarea placeholder="Type your message..." style="width: 550px;" id="messagea" name="messagea"></textarea>
      <div id="galilei">
        <button class="msg_send_btn" type="submit" name="send_msg" onclick="ref(); SubmitFormData();"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
      </div>
</form>

Код Ajax:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
    $('#msg_history').load('msg_history.php');
    }, 500);
  });

  function ref() {
    $(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setTimeout(function() {
      $('#message_form').load('form.php');
    }, 500);
  });
  }

  function scroll() {
    $(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
      return false;
  }

  function SubmitFormData() {
    var frm = $('#message_form');
    frm.submit(function (ev) {
        $.ajax({
            method:"POST",
            url:"insert_msg.php",
            data: frm.serialize(),
            beforeSend: function(){
              $('#galilei').html("Ajax Request is Processing!");
            },
            success: function (data) {
            }
        });

        ev.preventDefault();
    });
  }

Я ожидал, что он не будет дублироваться, например, я могу сказать «Привет», и он хранит только 1 «Привет» в базе данных. Но когда я отправляю сообщение, скажите «Привет». он, как обычно, сохраняет в базе данных 1 «Hello». Но, когда я отправляю другое сообщение, скажем "Вау", в базе данных хранятся 2 сообщения Wow и т. Д.

javascript php jquery html ajax

1

Nytraxaqw 27 Окт 2019 в 13:31

1

Вы добавляете новый прослушиватель событий отправки каждый раз, когда вызывается SubmitFormData(). Каждый слушатель отправит свой запрос. Простое исправление - не вызывать его в onclick, а вызывать его только один раз при загрузке страницы.

–

charlietfl

27 Окт 2019 в 13:43

Charlietfl, похоже, это исправило, но теперь он отправляет меня на страницу insert_msg.php, так что ... вы можете мне помочь?

–

Nytraxaqw

27 Окт 2019 в 14:01

Похоже, вы только удалили кнопку, но не вызвали функцию при загрузке страницы ... поэтому происходит процесс отправки формы по умолчанию

–

charlietfl

27 Окт 2019 в 14:02

Answer 1

Либо сохранить действие, либо нажать кнопку.

Если вы продолжаете нажимать, измените тип на кнопку. Это должно решить проблему

-1

Somnath Ghosh 27 Окт 2019 в 14:11

1

Не имеет смысла. Объясните, почему вы думаете, что это должно помочь

–

charlietfl

27 Окт 2019 в 14:32

Хорошо. Когда вы нажмете кнопку отправки, которая вызовет команду insert msg или ref. То, чего вы пытаетесь достичь, неправильно. Вы вызываете два действия одним щелчком мыши.

–

Somnath Ghosh

27 Окт 2019 в 15:08

Вы удалили onclick или действие?

–

Somnath Ghosh

27 Окт 2019 в 15:09

Answer 2

Удалите onclick вашего html, чтобы он выглядел так:

<form method="post" id="message_form" action="insert_msg.php">
      <textarea placeholder="Type your message..." style="width: 550px;" id="messagea" name="messagea"></textarea>
      <div id="galilei">
        <button class="msg_send_btn" type="submit" name="send_msg"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
      </div>
</form>

И измени свой JS на это:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
      $('#msg_history').load('msg_history.php');
    }, 500);
  });

  $(document).on('submit', '#message_form', function(e) {
    e.preventDefault();
    var frm = $(this);
    $.ajax({
      method:"POST",
      url:"insert_msg.php",
      data: frm.serialize(),
      beforeSend: function(){
        $('#galilei').html("Ajax Request is Processing!");
      },
      success: function (data) {
        $('#message_form').load('form.php');
      }
    });
  });

  function scroll() {
    $(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
      return false;
  }
}

Объяснение Мы добавляем в документ слушателя, который будет прослушивать событие отправки формы и перехватывать его. Затем мы отправляем эти данные с помощью ajax. Только после этого мы снова отображаем форму. Я бы лично не удалял форму из DOM, а просто скрывал ее, например:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
      $('#msg_history').load('msg_history.php');
    }, 500);
  });

  $('#message_form').on('submit', function(e) {
    e.preventDefault();
    var frm = $(this);
    var message = $('<div>Ajax Request is Processing!</div>');
    $.ajax({
      method:"POST",
      url:"insert_msg.php",
      data: frm.serialize(),
      beforeSend: function(){
        frm.hide();
        frm.insertAfter(message);
      },
      success: function (data) {
        message.remove();
        frm.show();
      }
    });
  });

  function scroll() {
    $(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
      return false;
  }
}

0

wawa 27 Окт 2019 в 16:06

Дублирование формы Ajax при отправке

2 ответа

Похожие вопросы

Новые вопросы

javascript