Question

I have a search field, and I need a clear button.

I currently have the button, but I don’t know how to do it,

I have 6 textfields, 2 comboboxes, and 2 multiple select lists

How do I clear all of them in one clear function??
I know the HTML way, but I am using Grails and the type=”reset” does not work.
That’s why I want a jQuery way of deleting textboxes’ values, leaving the combobox in the first index, and clear all options from the multiple select list.

Thanks for the help 😀

Answer 1

You can modify the code below to suit your needs. It’s stolen from this thread anyway.

jsfiddle

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

<form id='myform'>
    <input type='text' value='test' />
    <select id='single'>
        <option>One</option>
        <option selected="true">Two</option>
    </select>
    <select multiple="true" size="5" id='multiple'>
        <option>One</option>
        <option selected="true">Two</option>
    </select>
    <input type='button' id='reset' value='reset' />
</form>

EDIT (To clear multiple select):

$('#reset').click(function(){
    $(':input','#myform')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

    $("#myform #multiple").empty();
});​

jsfiddle v2