InterLinked
InterLinked

Reputation: 1403

Clear current text area only

I'm trying to clear the the text field after an AJAX POST request submission. Here is the relevant JS code:

$(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 processing script doesn't exist yet, so to test I'm testing on error instead of success.

The HTML form has class chat-send and the text area has class messagearea. I tried doing it without a messagearea class, and then added that in, but that hasn't helped so far.

Everything else about this is tested and works. I'm having trouble with the clear field part.

Here are just some of the things I've tried:

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

And many more variations on these, as well.

The only thing that actually has an effect is this, which is the most common (and also useless in this case) answer:

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

And that is not what I want, since it clears all the text areas with that class.

I think my efforts are being thrwarted because I'm not chaining downwards from this properly, but other examples seem to indicate these approaches should work, including other accepted answers on SO.

How can I select the text area in question using jQuery to clear it?

Upvotes: 0

Views: 31

Answers (2)

connexo
connexo

Reputation: 56754

Your problem is that your AJAX error handling function has a differently scoped this than your submit handler.

To fix that, simply create and use a closure:

$(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
            }
        });
    });
});

Upvotes: 1

Musa
Musa

Reputation: 97672

In the error callback this refers to the jqXhr object not the form.

You can use arrow function notation to keep the context (this) of the outer function in the error callback

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

Alternately you can set the context of your ajax request so that in all callbacks the this is set to whatever you want

    $.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
        }

Upvotes: 2

Related Questions