如何在jQuery中引用表单中的输入

Posted 2023-05-07

【中文标题】如何在jQuery中引用表单中的输入

【英文标题】：How to reference an input within a form in jQuery

【发布时间】：2010-09-20 01:41:24

【问题描述】：

一个简单的 jQuery 问题。

我在一页上有几个相同的表格（除了它们的名字），每个表格都有一些隐藏的输入。我想通过使用表单名称和输入名称来引用它们。 （输入名称在我的页面中不是唯一的）

例如：

var xAmt = $('#xForm'+num).('#xAmt');

我真的很想将这些值提供给 AJAX POST

    $.ajax(
      url: "X.asp",
      cache: false,
      type:  "POST",
      data:  "XID=xID&xNumber=xNum&xAmt=xAmt",

...

如果我能更好地获取 AJAX 调用中的值。

【问题讨论】：

为什么要花钱购买可以在 jQuery 网站上免费获得的东西？ :-)

没有找到有用的信息。官方文档好还是您在谈论示例/教程

我的意思是官方文档。我已经摆脱了购买像这样的不稳定主题的书籍的想法。此外，书籍缺少一个重要功能：您无法对它们进行全文搜索（除了“用你的眼睛”）。

【参考方案1】：

function queryX( args ) 
    var queryString = [ "XID=", args.XID, "&xNumber=", args.xNumber, "&xAmt=", args.xAmt ].join("");
    $.ajax(
        url: "X.asp",
        cache: false,
        type:  "POST",
        data:  queryString,
        success : function( data ) 
            return data;
        
    );

var myReturnData = queryX(
    XID : $("input[name='XID']").val(),
    xNumber : $("input[name='xNumber']").val(),
    xAmt : $("input[name='xAmt']").val()
);

编辑：

这为您提供了最大的灵活性，如果只有输入值会改变（但查询字符串变量不会），那么您可以传入任何您想要的值。

【参考方案2】：

看起来你想要来自jQuery forms plugin 的formSerialize()（甚至是ajaxSubmit()）。

【参考方案3】：

这里已经回答了执行此操作的灵活方法，但您也可以使其与您当前的代码一起使用。 （如果这对于您正在寻找的东西来说太基本了，请原谅我。）

使用 CSS 后代选择器（空格）从唯一的表单名称向下钻取：

var xAmt = $('#xForm'+num+ ' #xAmt').val();

对您需要的每个值重复并调用 $.ajax，就像您正在做的那样。

【讨论】：

当我这样做时，没有分配 xAmt。当我尝试输出警报以测试它时，它显示 [Object object]

【参考方案4】：

已编辑：

您需要先将它们全部选中，然后才能使用它们。

要仅访问 xForm# 元素，您可以执行这样的选择器（您应该检查语法，我没有运行它，这只是一个示例）：

$('form input[name*='xAmt']  ').each(function() alert( $(this).val() ); alert( $(this).parent().attr('name') + $(this).parent().attr('id') ); );

表单 input[name*='xAmt'] 表示选择表单内包含术语 xAmt 的任何元素。您还可以使用开头、结尾等。请参阅下面的链接。

在每个循环中，您可以将每个循环作为 $(this) 访问。你可以通过 $(this).parent() 访问它的父表单，这样你就可以知道输入在哪个表单中。

您可以在循环中构建数据，或者对它们执行其他操作，然后发布帖子。

见：

http://docs.jquery.com/Selectors/attributeContains#attributevalue

http://docs.jquery.com/Selectors

http://docs.jquery.com/Each

http://docs.jquery.com/Attributes/attr#name

http://docs.jquery.com/Traversing/parent#expr