Question 42372 in PHP Question posted in
Official manual can be found here.

Textarea value not resetting in post action with Ajax – PHP

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?

Tags:

3

Answers


  1. 0

    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
    });
});
    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
  3. 0

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search