JQuery采用了错误的值

Question

An easy question for you I think :-)

<form id="upload" method="post" name="form">  
<input id="id<?php echo $a; ?>" class="id" name="id" type="text" value="<?php echo $id_submit; ?>" >
<input style="margin-top:-5px;width:29px;" class="submit" type="image" src="save.jpg">
</form>

The source code looks e.g. like this:

Form 1:

<form id="upload" method="post" name="form">  
<input id="id1" class="id" name="id" type="text" value="12345" >
<input style="margin-top:-5px;width:29px;" class="submit" type="image" src="save.jpg">
</form>

Form 2:

<form id="upload" method="post" name="form">  
<input id="id2" class="id" name="id" type="text" value="65432" >
<input style="margin-top:-5px;width:29px;" class="submit" type="image" src="save.jpg">
</form>

After click on save.jpg it calls my jquery-function:

$(document).ready(function() {                              
                           $( "#upload" ).on("submit", function(e) {

                               e.preventDefault();

                                               var id = $('.id').val();
                                               …..

The problem is that when I click on save.jpg in the form 2, then it takes the value 12345 instead of 65432.

How can I fix that?

Answer 1

the form is needs to be unique

<form id="upload" method="post" name="form">

thats why it takes the first element found in the dom structure with the target id, change the id of the second form .

Also when you do

var id = $('.id').val();

there a more than one element with the given class. you can try this instead

var id = $(this).find('.id').val();

Happy Coding :)