CODEWITHSUNDEEP
phpjavascriptjquery
Santosh Mishra
Santosh Mishra

Reputation: 108

clearing the textbox input on button click

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...

Upvotes: 0

Views: 6592

Answers (5)

Rahul
Rahul

Reputation: 141

you can write code in jquery as:

$('#new').live('click',function(){
   $('#fname').val('');
   $('#lname').val('');
   $('#tel').val('');
});

Upvotes: 2

Dashang
Dashang

Reputation: 321

use the following code:

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

Upvotes: 2

Santosh Mishra
Santosh Mishra

Reputation: 108

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

Upvotes: 0

Novocaine
Novocaine

Reputation: 4786

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.

Upvotes: 0

BenM
BenM

Reputation: 53198

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

Upvotes: 2

Related Questions