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
– A Paul, Commented Dec 13, 2013 at 12:17

Ram · Accepted Answer · 2013-12-13 12:40:04Z

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, 2013 at 12:40

answered Dec 13, 2013 at 12:22

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ram Over a year ago

@Sergio I was updating the answer. The second snippet covers this.

Sergio Over a year ago

@undefined, ok, great!

Sergio · Accepted Answer · 2013-12-13 12:51:06Z

1

This works:

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

Fiddle

edited Dec 13, 2013 at 12:51

answered Dec 13, 2013 at 12:26

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Comments

Majid · Accepted Answer · 2013-12-13 12:22:28Z

0

use this:

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

answered Dec 13, 2013 at 12:22

Majid

14.3k16 gold badges81 silver badges117 bronze badges

Comments

Bas van Dijk · Accepted Answer · 2013-12-13 12:31:37Z

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, 2013 at 12:31

answered Dec 13, 2013 at 12:18

Bas van Dijk

10.8k10 gold badges62 silver badges95 bronze badges

4 Comments

zur4ik Over a year ago

No, not erase. I had some value before edit, than after click old value must be returned.

A Paul Over a year ago

I dont think $("textarea").val(""); will work. But I may be wrong .. you need .html('') here.

Bas van Dijk Over a year ago

The you first need to store all those values beforehand and then restore them I will create an example.

A Paul Over a year ago

use some hidden variables.. store the values there and then again restore them.

Mr.G · Accepted Answer · 2013-12-13 12:33:14Z

0

Try this:

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

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

answered Dec 13, 2013 at 12:33

Mr.G

3,6092 gold badges19 silver badges21 bronze badges

Comments

Pradeep Pansari · Accepted Answer · 2013-12-13 12:22:16Z

-1

Try This...

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

answered Dec 13, 2013 at 12:22

Pradeep Pansari

1,2976 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to reset fields values out of html form with jQuery

6 Answers 6

2 Comments

Fiddle

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related