Reputation: 1403
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
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
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