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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clearText">Click Here To Clear Textarea</button>
<br>
<textarea id="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)

<div class="write_comment" style="">
<form id="form-name" >
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
  <div class="buttons" style="float:right">
        <button id="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:

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

Javascript:

function eraseText() 
{
   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('');

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

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

Share