Javascript HTML重置按钮结合使用jQuery设置的文本字段值

我有以下HTML格式的表单：

<form action="#" method="post">
    <label for="label-id">id</label>
    <input type="text" name="id" id="label-id" />
    <label for="label-name">Name</label>
    <input type="text" name="name" id="label-name" />
    <label for="label-description">Description</label>
    <input type="text" name="description" id="label-description" />
    <input type="reset" value="Cancel" />
    <input type="submit" value="Update" />
</form>

因此，如果我按下input type=“reset”按钮，所有值都为空。但是我想，按下按钮，我在jQuery中用上面三行设置的值应该在那里

比如说。 AJAX调用给我数据id=12，name=“test”，description=“my desc”，这些值被设置为文本输入字段，我看到了这些值。现在有人将name=“test”更改为“test123”。按下重置按钮，值应为name=“test”，而不是“test123”

我该怎么做

---

提前感谢并致以最良好的问候。

如果您存储数据对象并使其具有功能，则可以执行此操作，例如：

var currentData;

确保这在所有内容之外，以便其范围正确…例如。您的

ready

处理程序或甚至全局。。。并将字段重置转换为一个功能：

function resetForm() {
  $('#label-id').val(currentData.id);
  $('#label-name').val(currentData.name);
  $('#label-description').val(currentData.description);
}

然后在运行上述代码的

success

处理程序中，存储您的

数据（您当前正在使用的数据），并运行我们使用它生成的函数，例如：

currentData = data;
resetForm();

现在，您也可以在
的
重置
事件上使用相同的功能，并停止正常重置，如下所示：

$("form").bind("reset", function(e) {
  resetForm();
  e.preventDefault();
});

如果存储数据对象并使其成为函数，则可以执行此操作，例如：

var currentData;

确保这在所有内容之外，以便其范围正确…例如。您的
ready
处理程序或甚至全局。。。并将字段重置转换为一个功能：

function resetForm() {
  $('#label-id').val(currentData.id);
  $('#label-name').val(currentData.name);
  $('#label-description').val(currentData.description);
}

然后在运行上述代码的
success
处理程序中，存储您的
数据（您当前正在使用的数据），并运行我们使用它生成的函数，例如：

currentData = data;
resetForm();

现在，您也可以在
的
重置
事件上使用相同的功能，并停止正常重置，如下所示：

$("form").bind("reset", function(e) {
  resetForm();
  e.preventDefault();
});

您可以为每个
元素设置属性/属性，因此当按下重置按钮时，所有元素都会重置为定义的默认值：

$('#label-id').val(data.id)[0].defaultValue = data.id;
$('#label-name').val(data.name)[0].defaultValue = data.name;
$('#label-description').val(data.description)[0].defaultValue = data.description;

工作演示：

注意：您可以使用
.attr（“defaultValue”，value）
代替
[0].defaultValue
，但效率不高

还要注意，
defaultValue
仅适用于文本元素。如果您有其他类型的字段，您可以处理
元素以将默认值重新应用于选择、检查、无线电等

$('form').bind("reset", function () {
    $('#label-id').val(data.id);        
    $('#label-name').val(data.name);
    $('#label-description').val(data.description);
    $('#label-someselect').val(data.someSelectValue);

    // Cancel the default action
    return false;
});

您可以为每个
元素设置属性/属性，因此当按下重置按钮时，所有元素都会重置为定义的默认值：

$('#label-id').val(data.id)[0].defaultValue = data.id;
$('#label-name').val(data.name)[0].defaultValue = data.name;
$('#label-description').val(data.description)[0].defaultValue = data.description;

工作演示：

注意：您可以使用
.attr（“defaultValue”，value）
代替
[0].defaultValue
，但效率不高

还要注意，
defaultValue
仅适用于文本元素。如果您有其他类型的字段，您可以处理
元素以将默认值重新应用于选择、检查、无线电等

$('form').bind("reset", function () {
    $('#label-id').val(data.id);        
    $('#label-name').val(data.name);
    $('#label-description').val(data.description);
    $('#label-someselect').val(data.someSelectValue);

    // Cancel the default action
    return false;
});

我很确定这在旧的浏览器中不起作用，是吗？至少是Firefox2，我不确定IE@Nick：它是在中定义的。它在IE6中工作得很好，我认为没有人再使用Firefox1了；-）它是这样工作的，但是你能告诉我为什么我需要[0]吗？@Andy-哦，不，我的意思是它在FF2中不工作，它是在3中添加的IIRC@Tim：见答案底部的注释<代码>[0]
允许我们访问jQuery对象中的第一个DOM元素，以便我们可以直接操作其属性
attr
有点效率低下，因为实现完全相同的功能需要很长的时间。我很确定这在旧浏览器中不起作用，不是吗？至少是Firefox2，我不确定IE@Nick：它是在中定义的。它在IE6中工作得很好，我认为没有人再使用Firefox1了；-）它是这样工作的，但是你能告诉我为什么我需要[0]吗？@Andy-哦，不，我的意思是它在FF2中不工作，它是在3中添加的IIRC@Tim：见答案底部的注释<代码>[0]

允许我们访问jQuery对象中的第一个DOM元素，以便我们可以直接操作其属性

attr

有点效率低下，因为要实现完全相同的目标需要很长的路。