removing input values when element is hidden using jquery

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.

My question is why would you want to remove the input values? Why not keep them in case the user made a mistake or wants to come back? If redoing the form is such a struggle you can provide a "Clear" button (but should probably redo your UI) — Explosion Pills
– Explosion Pills, Commented Apr 26, 2012 at 4:34
@tandu its okay, I don't have that much information users would need to input anyways. I have a purpose for doing so. :) — hellomello
– hellomello, Commented Apr 26, 2012 at 4:55

Michael Buen · Accepted Answer · 2012-04-26 05:13:25Z

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

Dips · Accepted Answer · 2012-04-26 04:35:57Z

0

$(this).val(''); or

$(this).attr('value','');

answered Apr 26, 2012 at 4:35

Dips

3,2903 gold badges22 silver badges21 bronze badges

4 Comments

hellomello Over a year ago

I guess this would be the only way huh? But since I have a submit button, I can't do something like $(this, input).val(''); If I'm trying to remove text and file, how do I do more than one selector? I can do $(input[type='text']), but how do I combine type='file'? Thanks

Dips Over a year ago

You can specify your selector like $('form input[type="text"]').val('');

hellomello Over a year ago

How do I add more than one type? If i want to add text and file?

Dips Over a year ago

You can follow the same rule $('form input[type="text"]').val(''); $('form input[type="input"]').val('');

DRAKO · Accepted Answer · 2012-04-26 04:38:22Z

0

$(selector).empty() is used to delete all the child elements as well as the text within them. Since you wish to preserve the stye and the elements use a child selector for the parent form and set each elements value to ''.

$('#form').children().val('');

$('#form').children().attr('value','');

answered Apr 26, 2012 at 4:38

DRAKO

1121 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

removing input values when element is hidden using jquery

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related