javascript - How to restore default value of text field in jQuery? - Stack Overflow

admin管理员组

文章数量:1343284

I have a page with a table having some <input type="text"> fields. I have a button next to each field. I allow user to change the text of input fields. But when the user click the button next to input field, the corresponding input field's value need to be restored to default (previous) value.

I tried to make an array with index as input field's name. This array can store default values, and can be retrieved easily and restored to their corresponding fields. I tried to do this using keyup(function(), but I know that this triggers each time key is pressed.

Here is my HTML;

<input class="zx" type="text" name="qwer" value="Google" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Yahoo" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Bing" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Ask" /><button class="cncl">X</button><br />

Here is the fiddle.

How can I restore the default values to the fields?

I have a page with a table having some <input type="text"> fields. I have a button next to each field. I allow user to change the text of input fields. But when the user click the button next to input field, the corresponding input field's value need to be restored to default (previous) value.

I tried to make an array with index as input field's name. This array can store default values, and can be retrieved easily and restored to their corresponding fields. I tried to do this using keyup(function(), but I know that this triggers each time key is pressed.

Here is my HTML;

<input class="zx" type="text" name="qwer" value="Google" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Yahoo" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Bing" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Ask" /><button class="cncl">X</button><br />

Here is the fiddle.

How can I restore the default values to the fields?

• javascript
• jquery
• forms
• restore

Share Improve this question Follow edited Apr 4, 2018 at 17:16 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 24, 2014 at 10:59 AlfredAlfred 21.4k6363 gold badges174174 silver badges257257 bronze badges 3

• what do you mean by previous value? the original value when the input was created – Arun P Johny Commented Mar 24, 2014 at 11:01
• Why not just $('form')[0].reset()? – putvande Commented Mar 24, 2014 at 11:06
• why dont you use placeholder attribute and do your form processing after checking if the submitted value has value or not – Viswanath Polaki Commented Mar 24, 2014 at 11:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use the defaultValue property of the input element

$('.cncl').click(function(){
    $(this).prev().val(function(){
        return this.defaultValue;
    })
})

Demo: Fiddle

Try this, use .attr('value') to get the default value:

$('.cncl').on('click', function () {
    $(this).prev().val($(this).prev().attr('value'));
});

DEMO

I have done something similair in the past. I stored the default value in an attribute of the html-tag itself.

<input class="zx" type="text" name="qwer" default-value="Google" value="Google" />

When you like to restore it you can execute

$('selector').val($('selector').attr('default-value'));

本文标签： javascriptHow to restore default value of text field in jQueryStack Overflow