How to reset fields values out of html form with jQuery

Question

How to reset <INPUT> and <TEXTAREA> values with jquery click() if these elements are not part of any <FORM>?

you can just use the id of the elements to reset it. I think for input it will be $(#id).val('') for textarea $(#id).html('') — A Paul, Dec 13 '13 at 12:17
possible duplicate of [Clear text area](http://stackoverflow.com/questions/8284960/clear-text-area) — Milind Anantwar, Dec 13 '13 at 12:27

undefined · Accepted Answer · 2013-12-13T12:40:04.323

3

You can reset the values using defaultValue property, both HTMLTextAreaElement and HTMLInputElement support the property, the default value is the value as originally specified in HTML that created these objects.

$('#reset').on('click', function() {
   $('input, textarea').val(function() {
       return this.defaultValue;
   });
});

In case that you only want to reset the values of inputs and textareas that don't belong to a form element you can use .filter() method:

$('#reset').on('click', function() {
   $('input, textarea').filter(function() {
       return !this.form;
   }).val(function() {
       return this.defaultValue;
   });
});

If the form property is null the input/textarea is not descendant of a form element.

http://jsfiddle.net/E2tbk/

edited Dec 13 '13 at 12:40

answered Dec 13 '13 at 12:22

undefined

136,817
15
158
186

Thanks! this is exactly what I needed! – zur4ik Dec 13 '13 at 12:24
@Sergio I was updating the answer. The second snippet covers this. – undefined Dec 13 '13 at 12:45
1

@undefined, ok, great! – Sergio Dec 13 '13 at 12:47

Sergio · Answer 2 · 2013-12-13T12:51:06.360

1

This works:

var elements = $('input,textarea');
$('button').click(function () {
    elements.each(function () {
        if (!this.form) this.value = this.defaultValue;
    });
})

Fiddle

edited Dec 13 '13 at 12:51

answered Dec 13 '13 at 12:26

Sergio

27,160
10
79
126

Bas van Dijk · Answer 3 · 2013-12-13T12:31:37.887

0

This solution stores the initial values in the data-oldvalue attribute of the element. When you click the restore button it sets the values back to the initial ones.

Some pointed out you should use .html() to set the value of the textarea. I tried this but it did not set the value while .val() did

$("input").each(function() {   
    $(this).attr("data-oldvalue", $(this).val());
});

$("textarea").each(function() {
    $(this).attr("data-oldvalue", $(this).html());
});


$("button").click(function() {

    console.log($(this).attr("data-oldvalue"));

    $("input").each(function() {   
        $(this).val($(this).attr("data-oldvalue"));     
    });

    $("textarea").each(function() {
        $(this).val($(this).attr("data-oldvalue"));    
    });

});

See: http://jsfiddle.net/zvPK7/

edited Dec 13 '13 at 12:31

answered Dec 13 '13 at 12:18

Bas van Dijk

7,931
8
51
81

No, not erase. I had some value before edit, than after click old value must be returned. – zur4ik Dec 13 '13 at 12:19
I dont think $("textarea").val(""); will work. But I may be wrong .. you need .html('') here. – A Paul Dec 13 '13 at 12:19
The you first need to store all those values beforehand and then restore them I will create an example. – Bas van Dijk Dec 13 '13 at 12:19
use some hidden variables.. store the values there and then again restore them. – A Paul Dec 13 '13 at 12:20

score 0 · Answer 4 · answered Dec 13 '13 at 12:22

0

use this:

document.getElementById('yourInputID').value = "";

answered Dec 13 '13 at 12:22

Majid

12,271
14
71
107

score 0 · Answer 5 · answered Dec 13 '13 at 12:33

0

Try this:

$('#click').on('click', function() {

    $("input[type='text'], textarea").val('');
});

answered Dec 13 '13 at 12:33

Mr.G

3,023
2
14
19

score -1 · Answer 6 · answered Dec 13 '13 at 12:22

-1

Try This...

$('#btnID').click(function(){
        $('#FormID')[0].reset();
});

answered Dec 13 '13 at 12:22

Pradeep Pansari

1,287
6
10

How to reset fields values out of html form with jQuery

6 Answers6

Fiddle