jQuery: How to make a clear button?

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 :D

I for one wonder why people have clear buttons, they always seem useless to me. — Winston Ewert, Oct 13 '10 at 16:33
I have to agree with Winston here, and then you fill in 10 fields and by accident press the clear button just to redo it. meh — Etienne Marais, Oct 13 '10 at 17:05
Yeah nobody wants a clear button. Nobody wants any button! That's why Google came out with Google Instant. — Josh Stodola, Oct 13 '10 at 17:23
http://www.codigomanso.com/en/2008/12/resetear-un-formulario-con-jquery/ — zod, Oct 13 '10 at 16:26

BrunoLM · Answer 1 · 2010-10-13T17:12:45.930

If you have a form just add a input with type reset

<input type="reset" value="Clear the Form" />

If you can't use this, then save the default values using .data and retrieve them on you reset the form.

See this example on jsFiddle

$("#container :text").each(function() {
    var $this = $(this);

    $this.data("default", $this.val());
});

$("#container select option").each(function() {
    var $this = $(this);

    $this.data("default", $this.is(":selected"));
});

$("#container :button").click(function() {
    $("#container :text").each(function() {
        var $this = $(this);
        $this.val($this.data("default"));
    });

  $("#container select option").each(function() {
      var $this = $(this);
      $this.attr("selected", $this.data("default"));
  });
});

HTML

<div id="container">
    <input type="text" value="default" />
    <select>
        <option>Op1</option>
        <option selected="true">Op2</option>
    </select>
    <select multiple="true" size="5">
        <option>Op1</option>
        <option selected="true">Op2</option>
    </select>

    <input type="button" value="reset" />
</div>

To clear all inputs and remove all options on select elements its more simple, see this example on jsFiddle (same html).

$("#container :button").click(function() {
    $("#container :text").val("");

    $("#container select").empty();
});

LOL, much better, but for the multiple select list, I want it to be blank, like remove all the options that it has. Like since is a search field, I add things to the list, and with the clear button it should erase all of them. Now, for demonstration purposes I only have to values, maybe if I erase them and leave it like that from the beginning it'll work?? Thanks — randomizertech, Oct 13 '10 at 16:54
To erase an input field just set val to empty: `val("")`. And to remove all options call `empty`. `$("#container select").empty();` — BrunoLM, Oct 13 '10 at 16:58

score 7 · Accepted Answer · edited May 23 '17 at 10:24

7

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

edited May 23 '17 at 10:24

Community

1
1

answered Oct 13 '10 at 16:49

bla

5,350
3
25
26

This is the way to go no doubt. +1 – Gabe Oct 13 '10 at 16:56
Ok, almost perfect. I need to leave the multiple select empty. With no options in it. – randomizertech Oct 13 '10 at 17:07
Each jQuery function that returns a jQuery collection (like val(), not(), removeAttr()) has the .each() built in, e.g. http://github.com/jquery/jquery/blob/master/src/attributes.js#L18 – Oct 13 '10 at 17:08
Here is the jQuery `$('#reset').click(function(){ $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); $("#myform #list").empty(); });` – randomizertech Oct 13 '10 at 17:11
nice.. I have updated the JQuery to clear multiple selection box as well. – bla Oct 13 '10 at 17:21
Just to mention, this will clear checkbox value, which probably is not desirable. – understack Jun 01 '11 at 07:43

Gabe · Answer 3 · 2010-10-13T16:57:49.860

1

Use Lee Sy En's solution that he found on SO. It's much better and takes care of everything.

$('#myClearButton').click(function() {
  $('#myTextBox').val('');

  $('#myComboBox').val('0'); // set to default value as an example i use 0 
});

edited Oct 13 '10 at 16:57

answered Oct 13 '10 at 16:21

Gabe

49,577
28
142
181

What about the combo box? And the multiple select list?? – randomizertech Oct 13 '10 at 16:28

jQuery: How to make a clear button?

3 Answers3

Linked