AJAX форма отправки работает только при первой отправке

Question

script.js

$(document).ready(function(){
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'data/addtext.php',
            dataType: 'HTML',
            success: function (result) {
                $('#meo').html(result);
            }
        });
    });
});

index.php

<div id="meo"></div>

ADDTEXT.PHP

<?php echo "HELLO WORLD" ?>

Итак, выше приведены мои коды. Я хочу, чтобы каждый раз, когда я отправляю форму, будет напечатано слово «HELLO WORLD», этот код работает при первом щелчке, и результат будет

HELLO WORLD

Теперь я хочу снова распечатать его, поэтому я снова нажму кнопку отправки, но при втором отправлении ничего не печатается. почему?

Я хочу получить вывод

HELLO WORLD HELLO WORLD

Другими словами, я хочу распечатывать «HELLO WORLD» при каждой отправке, но старый вывод останется. Так что, если я отправлю форму 3 раза, то результат будет

HELLO WORLD HELLO WORLD HELLO WORLD

Я знаю, что могу сделать это с помощью append и без использования формы, но я хочу сделать это с помощью формы ajax без перезагрузки страницы. Опять же, этот код работает, но только после первого нажатия на кнопку отправить

Почему не работает отправка второго клика?

Answer 1

. html() переопределяет содержимое внутри заданного вами элемента. попробуйте . append() вместо этого.

Answer 2

$(document).ready(function(){
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'data/addtext.php',
            dataType: 'HTML',
            success: function (result) {
                // This should work for you
                $('#meo').html($('#meo').html() + result);
            }
        });
    });
});

Answer 3

Вы не добавляете результат к #meo, вы каждый раз полностью его заменяете.

Вместо

$('#meo').html(result);

Попробуйте добавить result к существующим значениям / html в #meo. Как:

$('#meo').html($('#meo').text() + result);