JQuery 输入元素

发布于 2024-08-24 13:36:08 字数 112 浏览 9 评论 0原文

我需要获取 div 中的所有输入元素,然后附加事件处理程序,以便每当值更改时都会更新隐藏字段。 div 中的子元素可能已经包含事件处理程序,如果是这样,附加应该将其链接起来。

非常感谢任何帮助。

I need to get all input elements within a div and then attach event handlers, so that whenever values change it updates a hidden field. Children elements within the div might already contain event handlers, if so the attach should chain it.

Any help is much appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

天涯离梦残月幽梦 2024-08-31 13:36:08
$("#divID :input").change(function(){
    // write your code here
});

其中 divID 是 div 的唯一 ID。这将选择 div 内的所有输入、文本区域、选择和按钮元素。

请参阅 :input Selector

如果您想避免使用按钮元素, 您可以使用 not 运算符,例如

$("#divI :input:not('button')").change(function(){

});
$("#divID :input").change(function(){
    // write your code here
});

where divID is the unique id of the div. This selects all input, textarea, select and button elements inside the div.

See :input Selector

If you want to avoid the button element you can use the not operator like

$("#divI :input:not('button')").change(function(){

});
苏大泽ㄣ 2024-08-31 13:36:08

jQuery 自动处理链接,因此以下内容应该有效:

$("div input").change(function() { whatever(); });

jQuery handles chaining automatically, so the following should work:

$("div input").change(function() { whatever(); });
那伤。 2024-08-31 13:36:08

好吧,我很好奇为什么您需要更新隐藏字段并复制数据。但如果您坚持,这里有一个“一刀切的解决方案”,尽管您可能会失去一些灵活性,而不是手动附加每个元素。

首先是 HTML:

<form id="form">
   <input type="text" id="txtName" />
   <input type="hidden" id="hdnName" />

   <input type="text" id="txtEmail" />
   <input type="hidden" id="hdnEmail" />

   <select id="selGender">
      <option value="male">Male</option>
      <option value="female">Female</option>
   </select>
   <input type="hidden" id="hdnGender" />
</form>

现在是 Javascript:

$(document).ready(function() {
   $("#form").find("input[type='text'], select").change(function() {
      $this = $(this);

      var id = $this.attr("id");
      id = id.split(3, id.length - 1);

      $("#hdn" + id).val($this.val())
   });
});

为了使其工作,它假设您将每个字段都作为 text 字段,并且它们遵循我在这里使用的命名约定 ([txt |sel]FieldName, hdnFieldName)

Well, I'm curious why you need to update a hidden field and have your data duplicated. But if you insist, here is a "one size fits all solution", although you may lose some flexibility doing this instead of manually attaching each element.

First, the HTML:

<form id="form">
   <input type="text" id="txtName" />
   <input type="hidden" id="hdnName" />

   <input type="text" id="txtEmail" />
   <input type="hidden" id="hdnEmail" />

   <select id="selGender">
      <option value="male">Male</option>
      <option value="female">Female</option>
   </select>
   <input type="hidden" id="hdnGender" />
</form>

Now, the Javascript:

$(document).ready(function() {
   $("#form").find("input[type='text'], select").change(function() {
      $this = $(this);

      var id = $this.attr("id");
      id = id.split(3, id.length - 1);

      $("#hdn" + id).val($this.val())
   });
});

For this to work, it assumes you have each of your fields as text fields, also that they follow the naming convention I used here ([txt|sel]FieldName, hdnFieldName)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文