如何重置搜索表单中的特定表单元素

How to reset specific form element in a search form?

本文关键字：表单 元素 搜索 搜索表 何重置      更新时间：2023-09-26

我有一个搜索表单，其中包含不同的元素、复选框、选择、文本字段等。每个更改都伴随着一个ajax调用，该调用作为一种计数器获取结果的数量。我只想重置导致计数器返回值0的前一个元素。

我想跟踪变量中的每一个变化，每次计数器计算为0时，我都会重置导致变化的元素。然而，我担心这可能会迫使我用大量的代码和跳跃来以不同的方式处理所有不同的元素。

有没有一个任何人都能想到的更优雅的解决方案？我将感谢你的帮助。

我不能评论你的问题，但：如果我理解正确，就会有一个大表单，任何元素上的每个更改都会触发一个ajax调用，返回一个结果集。

如果此结果集大小为零，则希望表单重置为以前的值。

这意味着，只需要追踪并重置最后一个更改的值？

在这种情况下，onchange事件回调应该使用this值来获取当前表单元素值和ID。然后，当结果集返回时，如果没有行，则将存储的值设置回该元素。

否则，如果表单是全局管理的，那么您可以始终使用.clone()调用来存储它，如果结果集为空，则使用.remove()调用来存储，使用.insert()来存储克隆。

PS：我知道这个解决方案不是真正的优雅：）

您的AJAX模块可以返回一个JSON编码的字符串，其中包含导致此事件发生的数据（PHP函数：JSON_encode），从那时起，您可以循环使用错误值重置它们并显示进一步的信息。即"您的电子邮件似乎无效"。

PHP：请参阅JSON_encodeJavaScript:请参阅getElementsByTagName（'input'）（或textarea或select）注意：如果是选择项，您可能更希望更改属性"selectedIndex"而不是"value"。

我通过记录表单的每一次更改来解决问题

$("#form_id").on("change", function(event) {
  //Event bubbling
  type = $(event.target).get(0).type;
  selector = $(event.target);
}

然后使用策略设计模式（Javascript策略设计模式），我相应地重置了每个可能的字段类型。文本字段示例，

var Fields = {
  "text": {
    resetAction: function(fieldSelector) {
      fieldSelector.val('');
    }
  }
};
//To call the reset action for the type of field,
Fields[type].resetAction(selector);

我不得不触发一个隐藏字段的更改事件，使它们的更改也出现气泡。

相关文章：