选择特定表单的特定输入字段名称答案

【问题标题】：select particular input field name of particular form选择特定表单的特定输入字段名称
【发布时间】：2013-11-01 13:00:19
【问题描述】：

我有一些这样的html代码

<form name="first"><input name="firstText" type="text" value="General" /> 
<input name="secondText" type="text" value="General" /> 
<input name="ThirdText" type="text" value="General" /> 
<input name="FourthText" type="text" value="General" /> 
<input name="FifthText" type="text" value="General" />
</form>

<form name="second"><input name="firstText" type="text" value="General" /> 
<input name="secondText" type="text" value="General" /> 
<input name="ThirdText" type="text" value="General" /> 
<input name="FourthText" type="text" value="General" /> 
<input name="FifthText" type="text" value="General" />
</form>

我想使用 jquery 或 javascript 选择表单“second”的“secondText”，并且我想使用 jquery 更改它的值。

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

使用 jQuery：

var element = $("form[name='second'] input[name='secondText']");

使用原生 JS：

var element = document.querySelector("form[name='second'] input[name='secondText']");

更改值：element.val(value) 或 element.value = value，具体取决于您使用的内容。

【讨论】：

【解决方案2】：

// Define the target element
elem = jQuery( 'form[name="second"] input[name="secondText"]' );

// Set the new value
elem.val( 'test' );

【讨论】：

【解决方案3】：

用纯 JS 来说明问题：

document.querySelector('form[name=particular-form] input[name=particular-input]')

更新：

如果存在，该选择器将在名为“particular-form”的表单中返回名为“particular-input”的输入，否则返回null。

选择器过滤器“form[name=particular-form]”将查找名称等于“particular-form”的所有表单： <form name="particular-form">

选择器过滤器“input[name=particular-input]”将查找名称等于“particular-input”的所有输入元素： <input name="particular-input">

将两个过滤器与空格结合起来，我的意思是：

"form[name=particular-name] input[name=particular-input]"

我们要求querySelector()：嘿，在名称等于“particular-form”的所有表单中找到名称等于“particular-input”嵌套的所有输入。

考虑：

<form name="particular-form">
  <input name="generic-input">
  <input name="particular-input">
</form>
<form name="another-form">
  <input name="particular-input">
</form>
<script>
  document.querySelector('form[name=particular-form] input[name=particular-input]').style.background = "#f00"
</script>

此代码将仅更改第二个输入的背景颜色，无论第三个输入是否具有相同的名称。这是因为我们只选择嵌套在名为“特定表单”的表单中的名为“特定输入”的输入

我希望现在更清楚了。

;)

顺便说一句，很遗憾我没有找到关于 querySelector 过滤器的好/简单的文档，如果您知道任何参考，请在此处发布。

【讨论】：

请解释你的答案是做什么的。

【解决方案4】：

试试

$("form[name='second'] input[name='secondText']").val("ENTER-YOUR-VALUE");

【讨论】：

【解决方案5】：

你可以这样做：

jQuery

$("form[name='second'] input[name='secondText']").val("yourNewValue");

演示：http://jsfiddle.net/YLgcC/

或者：

原生 Javascript

旧浏览器：

var myInput = [];
myInput = document.getElementsByTagName("input");

for (var i = 0; i < myInput.length; i++) {
    if (myInput[i].parentNode.name === "second" &&
       myInput[i].name === "secondText") {
        myInput[i].value = "yourNewValue";
    }
}

演示：http://jsfiddle.net/YLgcC/1/

新浏览器：

document.querySelector("form[name='second'] input[name='secondText']").value = "yourNewValue";

演示：http://jsfiddle.net/YLgcC/2/

【讨论】：

【解决方案6】：

你也可以试试这条线：

$('input[name="elements[174ec04d-a9e1-406a-8b17-36fadf79afdf][0][value]"').mask("999.999.999-99",{placeholder:" "});

【讨论】：

【解决方案7】：

两种形式的添加按钮。 On Button click 使用 jquery 的 closest() 函数查找最近的表单。然后使用find()(jquery function) 获取所有输入值。 closest() 在 dom 树中向上搜索，find() 在 dom 树中向下搜索。 Read here

另一种方法是使用sibling()（jquery 函数）。在按钮上click 获取同级输入字段值。

【讨论】：