使用jQuery设置输入框的实际值属性

Question

我正在尝试重置输入框的实际值属性，以便在重置时可以将其重置回该值，而不一定是加载表单时的原始值。问题是这些更改似乎没有生效。我已经尝试了以下两种方法：

$(this).attr('value', $(this).val());

as well as....

$(this).val($(this).val());

这两种方法都不会改变输入框的 value="" 属性，而在重置表单时，该属性是被使用的。问题是，如果有人通过 AJAX 保存了表单，然后再次编辑并按下重置按钮（这次没有保存），它将回到页面加载时的原始值，而不是上次保存的值，这就是我想要解决的问题。我知道有一些方法可以解决这个问题（例如存储在本地变量中等），但是一个 jQuery 解决方案会更好。有什么想法吗？

- Ryan

Answer 1

当你在做类似这样的事情时：

$(this).val($(this).val());

它的确翻译为：

var temp = $(this).val());
$(this).val(temp);

实质上，它只是将相同的值放回。

您需要做的是在文档加载或AJAX请求时将该值存储在变量中，并在表单重置时检索它。

- Daniel A. White

Answer 2

这听起来像是一个很酷的技巧，这里还有另外一个。

您可以通过替换整个元素来修改DOM，因此不是：

```html

原始内容

```

而是：

```html

新内容

```

这样做会完全替换掉原始元素及其子元素。

$('#my_input').val("new_value_here");

您可以使用：

$('#my_input').replaceWith(' < input type="text" value="new_value_here" />');

- andrefy

---

或者 $('#my_input').replaceWith('<input type="checkbox" value="some_value" checked />');。 - dale landry

Answer 3

我已经想出了一个解决方案...

在保存表单时（通过AJAX，在成功回调中）：

// Set 'savedValue' attr on elements (for when reset, will reset to last saved values)
$('#myForm input').each(function() {
    $(this).attr('savedValue', $(this).val());
});

当需要重置表单时：

// Reset form
if($('#myForm input:first').attr('savedValue')!=undefined) {
    // Have saved values, reset to last saved values
    $('#myForm input').each(function() {
        $(this).val($(this).attr('savedValue'));
    });
}
else {
    // No saved values, reset form
    $('#myForm')[0].reset();    
}

这对于文本框非常有效，稍加调整即可使其与任何输入类型配合使用。我有很多输入，所以如果可能的话，我想避免手动存储/重置它们。这将是一个不错的插件...也许明天吧。

- Ryan

---

这对我非常有效，谢谢！我在文本字段的.keyup()上设置了savedValue。然后当我ajax文本字段时，它会提取最近的值，该值仍保存在savedValue中，然后在成功时使用这个不错的小脚本将字段重置为其先前的值 - $（“＃myForm input”）.each（function（）{ $（this）.val（$（this）.attr（'savedValue'））; }）非常感谢！ - Dante Cullari

Answer 4

只需使用 thing.value="foo"; 检查当 thing 是 jQuery 对象以及普通 DOM 对象时是否起作用。使用 attr('value', $(this).val()) 不会按照您希望的方式工作。

- Gordon Gustafson

Answer 5

比本地变量更好的是，您可以使用jQuery Data方法将重置值与要重置的元素一起存储。

保存时：

$(this).data("ResetValue", $(this).val());

重置时：

$(this).val($(this).data("ResetValue"));

更改选择器并适当添加未定义检查，正如Ryan所提到的。

- Kevin Gorski