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>?

Answer 1

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/

Answer 2

This works:

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

Fiddle

Answer 3

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/

Answer 4

use this:

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

Answer 5

Try this:

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

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

Answer 6

Try This...

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