Jquery Click Function get parameter From Different Form

Question

I have code like this

    <!-- 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>

Trying to get value from different form, but every parameter have same name, submit 1st form(fill name field with Josh) i got the right result I.e(Josh Using Btn), but when submit 2nd form (fill name field with Ipul) i still got the same value from the 1st form like "Ipul Using rqst", Why the jquery just get value from 1st form?not the 2nd form?can someone help me? http://jsfiddle.net/wf6wo0g7/

you should check this, http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types — Robin, Apr 17 '15 at 04:20
I agree with @RobinAT.. Then you call form elements based on their `form id` — Guruprasad J Rao, Apr 17 '15 at 04:21
Yes I've tried with different id and its work, did jquery share something like session or global variable? so we cant use the same id even its different form? — dmh, Apr 17 '15 at 04:21
http://api.jquery.com/id-selector/ - see this,Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid. — Robin, Apr 17 '15 at 04:23
you would call all elements with the same ID. if `` has the same ID as ``, then `$("#anch").click()` is going to catch the event from either. — Twisty, Apr 17 '15 at 04:24

score 1 · Answer 1 · answered Apr 17 '15 at 04:20

1

ID - Must be unique in HTML.

DEMO

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

answered Apr 17 '15 at 04:20

Gibbs

21,904
13
74
138

score 1 · Accepted Answer · edited Apr 17 '15 at 05:31

Yes ID in html must be Unique in that case you can use class. See this

$(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

Jquery Click Function get parameter From Different Form

2 Answers2