Question

我在页面上有多个表单。我已经创建了一个按钮来隐藏和取消每个表单（它的工作原理）。我试图在按钮后添加#family_name的值来标识按钮的用途。但是，每个表单上的每个按钮后都会显示第一个 #family名称的值。我希望显示与该特定表单关联的值。

（我知道按钮放在一个愚蠢的地方......现阶段不是问题）

var family = $("input#family_name").val();
$("input#salutation").after("<button title=\"View, Amend or Add\" id=\"chnx\">+</button><span>" + family + "</span>");

<div id="1">
<form id="1">
<fieldset>
<p>
<label for="salutation">Salutation</label>
<input name="salutation" id="salutation" class="required" value="Mr" type="text">
</p>
<p>
<label for="family_name">Family Name</label>
<input name="family_name" id="family_name" class="required" value="Parker" type="text">
</p>
<p>
<label for="first_name">First Name</label>
<input name="first_name" id="first_name" class="required" value="" type="text">
</p>
<p>
<label for="middle_name">Middle Name</label>
<input name="middle_name" id="middle_name" class="required" value="" type="text">
</p>
<p>
<label for="DOB">Date of Birth</label>
<input name="DOB" id="DOB" class="required" value="" type="text">
</p>
<input value="Add" id="add" type="submit">
<input value="Amend" id="amend" type="submit">
</fieldset>
</form>
.......
<form id="2">
.......
.....mutliple forms......
.......
</div>

Answer 1

ID应该是唯一的。如果您有多个具有相同ID的实例，则应该使用类。

Answer 2

ID在页面中必须是唯一的，因此您无法查找带有ID的第一个元素。

您需要做的是将它们更改为类名（以及每个表单中复制的所有其他元素），并在每个表单上循环以仅查看该表单中的数据并进行追加。

如下所示

$('form').each(function(){
    var family = $(this).find("input.family_name").val();
     $(this).find("input.salutation").after("<button title=\"View, Amend or Add\" id=\"chnx\">+</button><span>" + family + "</span>");

});

最好还为表单添加一个公共类名，以防你有任何其他类型的表单，例如与此操作无关的登录

jquery以多种形式获取特定输入元素的值

2 个答案: