Textarea value not resetting in post action with Ajax-CodePudding

I'm using PHP and Ajax to post without page refresh. Everything works fine but the textarea content is not reset after submitting the form.

This is my Ajax code:

  $("#new_post__add").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
    }).done(function(response){ //
        $("#load_data").html(response);
    });
});

How can I reset the textarea value after successfully submitting the form? can you please edit my code?

CodePudding user response：

You can also reset all elements within the form by doing any of the following

$('#new_post__add').trigger('reset');
$('#new_post__add')[0].reset();
document.getElementById('#new_post__add').reset();

CodePudding user response：

Inside the done callback, you can target the text area element and clear it.

textarea.value = '';

  $("#new_post__add").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
    }).done(function(response){ //
        $("#load_data").html(response);
        $('#new_post__add textarea').val(""); //this is assuming there is only one textarea inside your form
    });
});

CodePudding user response：

Try using success instead of done. Depending on the version, success may or may not be deprecated.

  $("#new_post__add").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(response){ //
        $("#load_data").html(response);
    });
});

If it still doesn't work, I'd add fail and always handlers with console.log output to see what's happening. If you're sure success is not deprecated in your version, then the equivalent are error and complete. Or maybe I've mixed versions. Hell, you can have all six, and see which get called!