Jquery Click Function 从不同的表单获取参数答案

【问题标题】：Jquery Click Function get parameter From Different FormJquery Click Function 从不同的表单获取参数
【发布时间】：2015-06-23 18:33:22
【问题描述】：

我有这样的代码

    <!-- 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）我仍然从第一种形式获得相同的值，例如“Ipul Using rqst”，为什么 jquery 只从第一种形式获得价值？而不是第二种形式？有人可以帮助我吗？ http://jsfiddle.net/wf6wo0g7/

【问题讨论】：

至少你可以为第二种形式使用不同的 id
你应该检查一下，stackoverflow.com/questions/5611963/…
form[0] vs form[1] ?通过它的 DOM 索引调用它？
我同意@RobinAT.. 然后你根据他们的form id调用表单元素
是的，我尝试过使用不同的 id 及其工作，jquery 是否共享会话或全局变量之类的东西？所以我们不能使用相同的 id 即使是不同的形式？

标签： javascript php jquery html forms

【解决方案1】：

是的 html 中的 ID 必须是唯一的，在这种情况下你可以使用类。看到这个

$(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");
    });
});

Fiddle

【讨论】：

【解决方案2】：

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

DEMO

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

【讨论】：