CODEWITHSUNDEEP
javascriptjqueryhtml
Sergjake
Sergjake

Reputation: 21

Clear value on textareas and inputs using a button

I'm trying to put a script where you can clear the value on inputs and text-area by clicking on a button. I copied a script on the web that can clear my inputs it worked but how can I include textareas on it?

Here's the script:

$("#btnpost").click(function(){
var inp = $("input");
if(inp.val()) {
   inp.val(''); 
}
}); 

<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea class="form-control " rows="5" placeholder="Insert Content Here"></textarea> 
<button type="button" class="btn btn-primary"  id="btnpost">

 Post

Upvotes: 1

Views: 98

Answers (5)

Alex
Alex

Reputation: 8695

I suggest you use html reset button. You only need to wrap all your elements inside a form element.

<form>
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea class="form-control " rows="5" placeholder="Insert Content Here"></textarea> 
<button type="reset" value="Reset">Reset</button>
</form>

link

Upvotes: 1

Beroza Paul
Beroza Paul

Reputation: 2117

The simplest would be this one: 

$("#btnpost").click(function(){
   $("#inputEmail3, #textArea").val("");
});

Upvotes: 1

Aramil Rey
Aramil Rey

Reputation: 3475

If those elements are inside a form I'd recommend to use .reset() 

$("#btnpost").on('click', function() {
    $(this).closest('form').reset();
});

Just a preference, it seems 'cleaner' to me.

Upvotes: 1

Shehary
Shehary

Reputation: 9992

you can simply do like this. assign id id="textArea" to textarea

$(document).ready(function(){
	$("#btnpost").click(function(){
		$("#inputEmail3").val("");
		$("#textArea").val("");
	}); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea id="textArea" class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="button" class="btn btn-primary" id="btnpost">ClearMe</button>

Fiddle

Upvotes: 1

coolguy
coolguy

Reputation: 7954

$(document).ready(function(){
$("#btnpost").click(function(){
   $('input ,textarea').each(function(){
   if($(this).val() !=""){
    $(this).val() = "";
  }
});
}); 
});

Upvotes: 1

Related Questions