Как сабмитить форму ajax без перезагрузки страницы?

Question

[baomastr]

Доброго времени суток! Я начинающий фронт. С аяксоми первый раз работаю, прошу помощи в разъяснении, гугл не выручил(
имею следующую задачу.
при клике на кнопку всплывает попап, в котором находится окошко чата с одним инпутом. Пользователь строит диалог с ботом и при каждом сабмите формы данные должны аяксом отправляться на серве, а сообщение из инпута перемещается в окно чата.
Писал всё локально, без сервера, работает, сообщения в чатик поступают. Но как залил на сервер при сабмите происходит переход на 404, либо вообще не сабмитится, если использовать event.preventDefault();
Пробовал убирать кнопку c type="submit и ставить простой span вместо него, всё равно страница перезагружается после отправки данных формы.
Прошу подсказать, как сделать, чтоб код работал как на локальной машине.

код функции для отправки данных на сервер:

$( document ).ready(function() {

    function AjaxFormRequest() {

        var messages = [].slice.call(document.getElementById('chatbot-message').querySelectorAll('.from-user'));
        var lastMsg = document.getElementById('chatbot-input').value;
        var filteredMessages = messages.map(
                (msgBlock) => {
                return msgBlock.textContent.replace('Вы: ', '')
            })
        console.log(filteredMessages);
        console.log(lastMsg);

        $.ajax({
            url: "test.php",
            type: "POST",
            dataType: "html",
            data: JSON.stringify(filteredMessages + ' , ' + lastMsg),
//            success: function(res) {
//                alert(res);
//            }
//            error: function(res) {
//                alert('shit happens');
//            }
        });
    }

    $("#chatbot-submit").click(
        function(){
            AjaxFormRequest(null, $("#chatForm").attr("action"));
//            e.preventDefault();
//                return false;
        }
    )
});

здесь весь код

Answer 1

[Константин Б.]

Что за ад. При вызове функции у тебя передаются аргументы, но в самой функции они не указаны.

Все реализуется гораздо проще.

$(function () {
  
  var myForm = $('form');
  myForm.on('submit', function() {
  
      $.ajax(
          // Тут отправляем AJAX запрос, очищаем поле, вставляем сообщение в чат и т.д.
      );

      // Чтоб страница не перезагрузилась
      return false;
  });

  $("#chatbot-submit").on('click', function() {
      myForm.submit();
  });

});

Comments

[baomastr]

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

[baomastr]

Kostik_1993 Ваше решение не подошло

[trushka]

почему не подошло? Внутри функции обработчика submit можите брать данные откуда угодно, выводить что угодно и куда угодно, и что угодно ниа сервер отправлять)) Тут же показано, как реализовать, чтоб при этом отменить стандартный сабмит с перезагрузкой страницы. Единственно, что тут лишнее - обработчик клика по сабмиту - событие сабмит и так возникнет при её нажатии. А так мы сразу 2 одинаковых запроса отправим, поскольку при клике ещё дополнительный сабмит получим))

Answer 2

[trushka]

Обработчик не та клик сабмита ставить надо, а на сабмит формы:

$("#chatForm").submit(function(){
.........
return false
})

Всё, на кнопку никакого дополнительного обработчика вешать не нужно - форма и так отправится и по клику на неё, и по энтеру. Вернее, не отправится, а сработает ваш обработчик, и отправит аякс-запрос.

Comments

[baomastr]

trushka благодарю! Внятно и коротко. Вопрос решён

Answer 3

[riot26]

https://stackoverflow.com/questions/23507608/form-...

Comments

[baomastr]

спасибо, но тоже не помогло

[baomastr]

когда я использую event.preventDefault(); то после клика на кнопку отправить сообщения пользователя не поступают в окно чата

Answer 4

[Владимир Куликов]

<form onsubmit="return false;">