3

How do I reset an individual input element with JQuery (is it JQuery, or JavaScript)?

How to reset a form using jQuery with .reset() method shows how to reset an entire form, but I want to reset individual elements, not the entire form.

Community
  • 1
  • 1
Andrew Grimm
  • 78,473
  • 57
  • 200
  • 338

6 Answers6

4

You can access the original value of an input element with the defaultValue attribute.

For example you can do this:

var myInput = document.getElementById("myInput");

myInput.value = myInput.defaultValue;
Roumelis George
  • 6,602
  • 2
  • 16
  • 31
2

You might need to use a hack for this.

Use .wrap() to temporarily wrap the required input with a form.

$('#input1,#input2').val('testUpdated');
$('#input1').wrap('<form/>');
$('#input1').closest('form')[0].reset();
$('#input1').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input id="input1" value="test"/>
    <input id="input2" value="test"/>
</form>
Shaunak D
  • 20,588
  • 10
  • 46
  • 79
  • i mean, i find your idea clever. why not append a `
    ` to the body, move the input in there, reset the form, and re-move the input to its original position? although, i dont know how important it is to reset the input in the original form.
     – Alex Sep 02 '15 at 08:36
  • 1
    Even if the input is already in a form, you can temporarily wrap another form. Chek here http://jsfiddle.net/m7e0277t/1/ – Shaunak D Sep 02 '15 at 08:38
1

If the value has been set in the input element, then it can be referenced back to

 $('#resetName').click(function () {
     $('#name').val($('#name').attr('value'));
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="TEST" id="name"></input>
    <input value="99" id="age"></input>
    <input value="1 Apr 2000" id="DOB"></input>
    
    <button id="resetName" value="Reset Name">Reset Name</button>
Pindo
  • 1,585
  • 5
  • 16
  • 32
1

Resetting a single input field with jQuery:

$('#myField').val($('#myField').prop("defaultValue"));
Michael
  • 116
  • 6
1

It's very simple

$('#escape').on('click', function(e){
                        $('#field').val($('#field').defaultValue);
});
Mantas Dainys
  • 71
  • 3
-1

FIDDLE

TRY USING $(this).val(defaultVal); as 

('#maincontainer').find('textarea,input[type=text]').each(function () {
        var defaultVal = $(this).data('default');
        $(this).val(defaultVal);
    });

Change the ID if you want a specific input to be cleared here i just show how to clear input and textarea in general

Brownman Revival
  • 3,620
  • 9
  • 31
  • 69
  • When I test it, `$(this).data('default')` returns undefined. Is this the desired behaviour? – Alex Sep 02 '15 at 08:51
  • you should put default as blank i didnt know you need that kind of info the question merely states reset the input – Brownman Revival Sep 02 '15 at 08:55
  • without explicitly defining `data-default` this will return `undefined` and hence is not very practical – Alex Sep 02 '15 at 11:26
  • I have been reading the question several times but it didnt mention that he needs to get the value all he wants is to reset the input and this example does that but thanks anyway – Brownman Revival Sep 02 '15 at 11:33