Очистить только текущую текстовую область

Question

Я пытаюсь очистить текстовое поле после отправки запроса AJAX POST. Вот соответствующий код JS:

$(document).ready(function() {
    $(".chat-send").submit(function(event){
        event.preventDefault();
        var post_url = $(this).attr("action");
        var request_method = $(this).attr("method");
        var form_data = $(this).serialize();
        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data,
            success : function( data ) {
                alert('Submitted' + data);
            },
            error : function( xhr, err ) {
                alert('Error' + err);
                // CLEAR FIELD
            }
        });
    });
});

Скрипт обработки еще не существует, поэтому для проверки я тестирую на ошибку, а не на успех.

The HTML форма имеет класс chat-send, а текстовая область имеет класс messagearea. Я попытался сделать это без класса messagearea, а затем добавил это, но пока это не помогло.

Все остальное проверено и работает. У меня проблемы с частью clear field .

Вот лишь некоторые из вещей, которые я пробовал:

$(this).find(".messagearea").val("");
$(this).closest("form").trigger( "reset" );
$(this).closest("form").find(".messagearea").val("");
$(this).children().filter(".messagearea").val("");
$(this).find('.messagearea').empty();

И многие другие варианты этих , а также.

Единственное, что действительно имеет эффект, - это самый распространенный (и также бесполезный в данном случае) ответ:

$(".messagearea").val("");

И это не то, что я хочу, поскольку он очищает все текстовые области с этим классом.

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

Как я могу выбрать рассматриваемую текстовую область, используя jQuery, чтобы очистить?

Answer 1

В обратном вызове error this относится к объекту jqXhr, а не к форме.

Вы можете использовать нотацию стрелочной функции, чтобы сохранить контекст (this) внешней функции в обратном вызове ошибки

        error : ( xhr, err ) => {
            alert('Error' + err);
            $(this).find(".messagearea").val("");
        }

В качестве альтернативы вы можете установить контекст вашего запроса ajax, чтобы во всех обратных вызовах this устанавливался на все, что вы хотите

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
        context: this, //i.e. the form
        success : function( data ) {
            alert('Submitted' + data);
        },
        error : function( xhr, err ) {
            alert('Error' + err);
            $(this).find(".messagearea").val(""); // also the form
        }

Answer 2

Ваша проблема в том, что ваша AJAX функция обработки ошибок имеет другую this область видимости, чем ваш обработчик отправки.

Чтобы исправить это, просто создайте и используйте закрытие:

$(document).ready(function() {
    $(".chat-send").submit(function(event){
        event.preventDefault();
        var post_url = $(this).attr("action");
        var request_method = $(this).attr("method");
        var form_data = $(this).serialize();
        const form = this; // definition of a block scoped variable
        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data,
            success : function( data ) {
                alert('Submitted' + data);
            },
            error : function( xhr, err ) {
                alert('Error' + err);
                // CLEAR FIELD
                $(form).find(".messagearea").val(""); // which makes it available here as a closure
            }
        });
    });
});