jQuery - clear textarea text content

Question

How can i clear textarea content using "onclick"?

<div class="form-group col-sm-12">
    <label class="control-label col-sm-3">System Main Message</label>
    <div class="col-sm-4">
        <textarea id="editor-area" name="sysMsg" class="form-control"><?PHP echo $mainIndex['sysMsg'] ?></textarea>
        <a href="#" onclick="document.getElementById['editor-area'].value = ''">Clear message</a>
    </div>
</div>

for those having problem with event handlers, here is a workaround answer. https://stackoverflow.com/questions/8284960/clear-text-area/54265441#54265441 — Neo, Jan 19 '19 at 08:51

score 1 · Answer 1 · edited Jan 24 '18 at 11:43

1

use this. it will remove all the content of the text area

$( "#target" ).click(function() {
  $('#editor-area').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="editor-area">
  test test test
</textarea>
<button id="target">Clear</button>

edited Jan 24 '18 at 11:43

Granny

775
10
20

answered Jan 24 '18 at 11:25

Akshay komarla

694
10
20

score 1 · Answer 2 · edited Jan 24 '18 at 11:44

You are using incorrect brackets. Change document.getElementById['editor-area'] to document.getElementById('editor-area') and then it works:

<div class="form-group col-sm-12">
    <label class="control-label col-sm-3">System Main Message</label>
    <div class="col-sm-4">
        <textarea id="editor-area" name="sysMsg" class="form-control">Textarea value</textarea>
        <a href="#" onclick="document.getElementById('editor-area').value =''">Clear message</a>
    </div>
</div>

Pravin Vavadiya · Answer 3 · 2018-01-24T11:29:50.573

You can empty() methods in Jquery.

 $( "#clear" ).click(function() {
     $('#editor-area').empty();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-sm-12">
    <label class="control-label col-sm-3">System Main Message</label>
    <div class="col-sm-4">
        <textarea id="editor-area" name="sysMsg" class="form-control">testing text</textarea>
        <a id="clear" href="#">Clear message</a>
    </div>
</div>

jQuery - clear textarea text content

3 Answers3