Question

I have an div element

<div id=form><form id="formstuff">form input stuff</div></div>

that shows/hides (or toggles) when users clicks on another element

<div id="close"></div>

If #form is shown and user decides to input values, but suddenly decides to just click on the #close button to close the #form element without deleting the values. How would you delete all input values when the user decides to close #form or hide()?

Is the only way to do something like $(this).val(''); Or is there something like .empty(); but I don’t want to remove style and such, just the text.

Answer 1

Try this: http://jsfiddle.net/96FJp/

UI:

<form id="thisForm">
    <input type="text" value="HellO">
    <input type="text" value="World">

    <input type="button" value="wow"/>   
</form>

<input type="button" id="test">​

jQuery:

$('#test').click(function() {    
    $('input:not([type=button])', '#thisForm').val('');
 });

​

---

To include other inputs, just put a comma on jQuery selector, do this: http://jsfiddle.net/dpRJy/1/

UI:

<form id="thisForm">
    <input type="text" value="HellO">
    <input type="text" value="World">

    <input type="button" value="wow"/>  

    <select id="country">
        <option value="">--Select Country--</option>
        <option value="PH">Philippines</option>
        <option value="CN" selected>China</option>        
        <option value="CA">Canada</option>                
    </select>      

    <br/>
    <input id="drink" type="radio" name="drink" value="Water"> Water<br>
    <input id="drink" type="radio" name="drink" value="Beer"> Beer<br>
    <input id="drink" type="radio" name="drink" value="Wine" checked>Wine<br/>    
</form>

<input type="button" id="test">​

jQuery:

$('#test').click(function() {    
    $('input:not([type=button]),select', '#thisForm').val('');

    // radio button doesn't fit nicely to method val value clearing,
    // have to do this:
    $('input:radio','#thisForm').prop('checked', false);
 });
​