CODEWITHSUNDEEP
javascripthtmlbuttontextarea
noobprogrammer
noobprogrammer

Reputation: 1154

How to clear text area with a button in html using javascript?

I have button in html

<input type="button" value="Clear"> 
<textarea id='output' rows=20 cols=90></textarea>

If I have an external javascript (.js) function, what should I write?

Upvotes: 43

Views: 206539

Answers (5)

Ali Shah Ahmed
Ali Shah Ahmed

Reputation: 3333

Using the jQuery library, you can do:

<input type="button" value="Clear" onclick="javascript: functionName();" >

You just need to set the onclick event, call your desired function on this onclick event.

function functionName()
{
    $("#output").val("");
}

Above function will set the value of text area to empty string.

Upvotes: 6

A.A Noman
A.A Noman

Reputation: 5270

Your Html 

<input type="button" value="Clear" onclick="clearContent()"> 
<textarea id='output' rows=20 cols=90></textarea>

Your Javascript

function clearContent()
{
    document.getElementById("output").value='';
}

Upvotes: 1

Ivo
Ivo

Reputation: 9

You can simply use the ID attribute to the form and attach the <textarea> tag to the form like this:

<form name="commentform" action="#" method="post" target="_blank" id="1321">
    <textarea name="forcom" cols="40" rows="5" form="1321" maxlength="188">
        Enter your comment here...
    </textarea>
    <input type="submit" value="OK">
    <input type="reset" value="Clear">
</form>

Upvotes: -4

Rishabh
Rishabh

Reputation: 2021

You need to attach a click event handler and clear the contents of the textarea from that handler.

HTML

<input type="button" value="Clear" id="clear"> 
<textarea id='output' rows=20 cols=90></textarea>

JS

var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');

input.addEventListener('click', function () {
    textarea.value = '';
}, false);

and here's the working demo.

Upvotes: 9

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

Change in your html with adding the function on the button click

 <input type="button" value="Clear" onclick="javascript:eraseText();"> 
    <textarea id='output' rows=20 cols=90></textarea>

Try this in your js file:

function eraseText() {
    document.getElementById("output").value = "";
}

Upvotes: 82

Related Questions