Скрипт ajax перезагружает страницу?

Question

[Stung]

Есть форма, которая отправляет данные в базу, все отправляется скрипт ajax работает, но страница все же перезагружается. Как сделать чтобы она не перезагружала страницу. Если кто знает, покажите на примере кода, пожалуйста.

Сама форма:

<form id="form" enctype="multipart/form-data">
        <textarea type="text" name="text" id="text" placeholder="Ваш текст..." class="text1"></textarea>
        <button type="submit" name="submit" id="submit" class="submit" style="border: 0;" return false;><img class="im1" src="/default/отправить.png"></button>
      </form>

Код ajax:

<script>

$('#form button[type=submit]').click(function() {

    $.ajax({

        type: 'POST',

        url: 'chat.php',

        data: $('#form').serialize() + '&' + this.name + '=' + this.value,

        success: function(data) {

            console.log(data);

        }

    });

});

</script>

Answer 1

[Вадим]

Обрабатывать нужно не клик по кнопке сабмит, а событие сабмит на форме.
И в обработчике делать preventDefault().

form.on('submit', function(evt) {
  evt.preventDefault()
  $.ajax({})
}

Ну а если "религия" не позволяет делать правильно, то кнопка не должна быть типом сабмит, а должна быть type="button". Тогда клик по ней не будет отправлять форму и страница не будет перезагружаться.

Comments

[Stung]

кнопка перестала нажиматься

[Вадим]

Stung, очень расплывчатая формулировка. Гадание тут по пятницам. Так что давайте конкретнее.

[Stung]

Вадим, исправил код, кнопка нажимается, но не сохраняет данные.

[Вадим]

Stung, Ну это уже явно сосвем другой вопрос.
this.name + '=' + this.value, - это что в коде?

[Stung]

Вадим, Относится к форме, определяет имя и группу формы и кнопки, прибавляет и появляется ответ.

[Stung]

Вадим, у вас всё работает?

[Вадим]

Stung, Вы шутите? Что у меня может работать, я на текст смотрю. У меня нет запущенного сервера с вашим php обработчиком.

Относится к форме, определяет имя и группу формы и кнопки, прибавляет и появляется ответ.

Ну вот Вы когда код переделали, Вы это учли, что в this теперь не кнопка, а форма?

[Stung]

Вадим, получается так

Answer 2

[Danny Arty]

К чему у кнопки return false;?
Обработчик должен слушать событие отправки формы, а не нажатия кнопки, причем с методом preventDefault.
Причем непонятно, когда у вас подключается jquery (и подключается ли он вообще) и где находится скрипт, поэтому стоит обернуть обработчик в $(document).ready, чтобы дождаться загрузки страницы.

$(document).ready(function() {
       $('#form').submit(function(e) {
       e.preventDefault();
            $.ajax({
        
                type: 'POST',
        
                url: 'chat.php',
        
                data: $('#form').serialize() + '&' + this.name + '=' + this.value,
        
                success: function(data) {
        
                    console.log(data);
        
                }
            });
        }); 
    });

Comments

[Stung]

кнопка перестала работать

[Danny Arty]

Stung, jquery то подключен? в document.ready обернули как у меня в примере?

[Stung]

все подключено , вот см jquery.

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

[Danny Arty]

Stung, скопируйте скрипт из моего ответа и должно работать. Откройте devTools браузера (кнопка F12) и в нем перейдите во вкладку Network. Если там есть запрос на chat.php после клика кнопки, то все работает норм во фронте

[Stung]

Danny Arty, согласен, все работает, код 200, но в базу ничего не сохраняется

[Danny Arty]

Stung, ну это уже другой вопрос

[Stung]

Danny Arty, тогда в чем причина того что , форма не сохраняет данные в базе , если до этого сохранялось?

[Danny Arty]

Stung, потому что теперь отправляются не те данные видимо. У вас в коде this.name + this.value теперь надо заменить может быть? Я же не знаю код вашего php-обработчика

[Stung]

Danny Arty, все исправил, в базе все появляется , но вывода нет из базы

[Danny Arty]

Stung, это уже другая задача