.val（）仅返回PHP数组中的第一行

Question

I have a PHP form which is used for updating records which have come from an array, I'm currently testing a button to show the current Name in the record that appears but my issue is that the 1st row record always comes through even when I click on a different row in my array.

I have a simple form:

<form id="update_form">
<div class="row">
<div class="col">
<label>Name</label>  
<input type="text" name="fnameupdate" id="fnameupdate" class="form-control fnameupdate" value="<?php echo $row['Firstname'] ?>" /> 
</div>
</div>
</form>
<button name="updaterecord" id="updaterecord" class="btn btn-success omhformupdate floatleft"><i class="material-icons floatleft">add_circle</i><div>Update Appointment</div></button>

When the button is clicked this is the event thats being fired:

    <script>  
 $(document).ready(function(){  
  $('.omhformupdate').click(function(){  

       var nameupdate = $('#fnameupdate').val();  
              window.alert(nameupdate);

        });  
    });  
</script>

The alert does fire however only the first row is coming back all the time even though another row has been selected, What is causing this?

Answer 1

First of all, IDs must be unique, and an ID selector will just select the first element on the page with that ID. You should use a class selector.

Second, if you want the value of the input right before the button, you need to use a DOM traversal methods to find it, not just any element with the class.

 $(document).ready(function() { $('.omhformupdate').click(function() { var nameupdate = $(this).prev().find('.fnameupdate').val(); window.alert(nameupdate); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="update_form"> <div class="row"> <div class="col"> <label>Name</label> <input type="text" name="fnameupdate" id="fnameupdate" class="form-control fnameupdate" value="" /> </div> </div> </form> <button name="updaterecord" id="updaterecord" class="btn btn-success omhformupdate floatleft"><i class="material-icons floatleft">add_circle</i><div>Update Appointment</div></button>