How To Clear Textarea Field Onclick In Ajax?

How to clear textarea field onclick? the problem is I am using AJAX. it won't reload the page. can anyone help me to solve this problem.

Solution 1:

Try this. Click on button to clear Textarea

$('.clearText').click(function(){
  $("#form_task_comment").val('');
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass="clearText">Click Here To Clear Textarea</button><br><textareaid="form_task_comment">This is textarea</textarea>

Solution 2:

In case you do not want to use jQuery. And the other posts above do not mention how to reset your textarea ON send. When you bind onclick, it would clear the text BEFORE sending. Therefore you need to use form onsubmit

var textArea = document.getElementById("form_task_comment")
var form = document.getElementById("form-name")
form.addEventListener("submit", function(event) {
  textArea.value = "";
  event.preventDefault();
}, false)

<divclass="write_comment"style=""><formid="form-name" ><textareatype="text"id="form_task_comment"name="form_task_comment"value=""placeholder="Write your comment here..."></textarea><divclass="buttons"style="float:right"><buttonid="btn_comment_submit"class="btn btn-default btn hoverable btn-sm btn_comment_submit"style="margin:0rem;"type="submit">Add Comment</button></div></form></div>

Solution 3:

Simply just replace textarea.value with nothing when button is clicked??

html code:

<inputtype="button" value="Clear Text" onclick="eraseText();"></input>

Javascript:

functioneraseText() 
{
   document.getElementById("form_task_comment").value = "";
}

Solution 4:

You can simply clear the value of text area using .val() like this

$("#form_task_comment").val('');

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textareaid="form_task_comment">This is textarea</textarea>

Add this line of code wherever you want to clear the text area

Share