clearing the textbox input on button click - php

Question

i do have multiple text boxes called first name,last name,phone no and so on.. and i want to clear/refresh the input typed in it on button click called as refresh or clear.the problem is that the input in these text boxes are not getting refreshed because the data in it is coming from other page and it is getting refreshed when we type some thing in it
my code is as follows:
<div class="control-group">
<input value="<?php echo $model['pros']['oppid'] ?>" name="oppid" type="hidden" id="prospectid" />
<label class="control-label">First Name </label>
<div class="controls">
<input type="text" name="f_name" pattern="[-a-zA-Z]+" required="" title="First Name is required" value="<?php echo $model['pros']["f_name"]; ?>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name </label>
<div class="controls">
<input type="text" name="l_name" pattern="[-a-zA-Z]+" required="" title="Last Name is required" value="<?php echo $model['pros']["l_name"];?>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Primary phone </label>
<div class="controls">
<input type="tel" required="" pattern="[-0-9]+" title="Please Enter correct phone" name="pri_phone" value="<?php echo $model['pros']["pri_phone"];?>" />
</div>
</div>
and the button as
<button class="btn">New</button>
please suggest me on this...

Answer 1

use the following code:
$("#elementid").live('click',function(){
$(this).parents('form').find('input[type="text"]').val('');
});

Answer 2

Assuming that your input elements are inside of a form, and so too is your button, you can do this using jQuery:
$('button.btn').click(function(e) {
e.preventDefault();
$(this).parents('form').find('input[type="text"], input[type="tel"]').val('');
});

Answer 3

you can write code in jquery as:
$('#new').live('click',function(){
$('#fname').val('');
$('#lname').val('');
$('#tel').val('');
});

Answer 4

If your button is not within the form you can use the following
$('button.btn').click(function() {
$('.control-group input:not(:submit)').val('');
});
This will reset any type of input within the control-group divs except for submit inputs
If your reset button is within the form then BenM's answer is what you want.

Answer 5

$(".clearform").live('click',function(){
$(this).parents('form').find('input[type="text"], input[type="tel"],input[type="time"],input[type="email"],input[type="number"],input[type="date"],select').val('');
});