logo标签列表

Jquery点击函数从不同表单获取参数

javascriptphpjqueryhtmlforms
3
我有这样的代码
    <!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("#btn").click(function(){
            var vname = $("#name").val();
            var vgender = $("#gender").val();
            var vstage =$("#stage").val();
            alert(vname+" Using btn");
    });
    $("#rqst").click(function(){
            var vname = $("#name").val();
            var vgender = $("#gender").val();
            var vstage =$("#stage").val();
            alert(vname+" Using rqst");
    });
});
</script>
</head>
<body>
<div id="main">

<hr>
<form id="form" method="post">
<div id="namediv"><label>Name</label>
<input type="text" name="name" id="name" placeholder="Name"/><br></div>
<div id="emaildiv"><label>Gender</label>
<input type="text" name="gender" id="gender" placeholder="Gender"/></div>
<input type="hidden" name="stage" id="stage" value="0" /></div>

</form>
<button id="btn">Send Data</button>
</div>
<div id="result"></div

<br>


Request

<form id="form" method="post">
<div id="namediv"><label>Name</label>
<input type="text" name="name" id="name" placeholder="Name"/><br></div>
<div id="emaildiv"><label>Gender</label>
<input type="text" name="gender" id="gender" placeholder="Gender"/></div>
<input type="hidden" name="stage" id="stage" value="0" /></div>

</form>
<button id="rqst">Send Data</button>
</div>
<div id="result"></div

</body>
</html>

尝试从不同的表单中获取值，但每个参数都具有相同的名称。当提交第一个表单（将名称字段填写为Josh）时，我得到了正确的结果，即（使用Btn的Josh）。但是，当提交第二个表单（将名称字段填写为Ipul）时，我仍然从第一个表单中获得相同的值，例如“使用rqst的Ipul”。为什么jQuery只会从第一个表单中获取值？而不是第二个表单？有人能帮我吗？ http://jsfiddle.net/wf6wo0g7/
你应该检查这个链接：https://dev59.com/WG035IYBdhLWcg3wH8Ql - Robin
form[0] 和 form[1]？按 DOM 索引调用它？ - Twisty
我同意@RobinAT的观点。然后，你可以根据它们的“表单 ID”调用表单元素。 - Guruprasad J Rao
是的，我已经尝试了不同的ID，它可以工作。jQuery是否共享类似会话或全局变量的东西？因此，即使表单不同，我们也不能使用相同的ID吗？ - dmh
请查看此链接：http://api.jquery.com/id-selector/。每个ID值在文档中只能使用一次。如果有多个元素被分配了相同的ID，则使用该ID的查询仅会选择DOM中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同ID的元素的文档是无效的。 - Robin
显示剩余2条评论
2个回答
1

ID - 在HTML中必须是唯一的。

DEMO

   $("#rqst").click(function(){
        var vname = $("#name2").val();
        var vgender = $("#gender2").val();
        var vstage =$("#stage2").val();
        alert(vname+" Using rqst");
    });
1

在HTML中，ID必须是唯一的，如果不唯一可以使用class。参见：

$(document).ready(function(){
        $("#btn").click(function(){
            var vname = $("#form1 .name").val();
            var vgender = $("#form1 .gender").val();
            var vstage =$("#form1 .stage").val();
            alert(vname+" Using btn");
    });
    $("#rqst").click(function(){
            var vname = $("#form2 .name").val();
            var vgender = $("#form2 .gender").val();
            var vstage =$("#form2 .stage").val();
            alert(vname+" Using rqst");
    });
});

{{链接1：Fiddle}}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接