How to get specific row text field value using php and jquery?

Question

Hi i want to do the update function where each staff balance is listed in a row of the table. When the form is submit, it will only submit the specific row. Something like this.

Preview

I am newbie to jquery, can someone give me a direction?

<table id="rounded-corner">
        <thead>         
            <tr>
                <th scope="col" class="rounded-company">Name</th>
                <th scope="col" class="rounded">Position</th>
                <th scope="col" class="rounded">Annual Leave Balance</th>
                <th scope="col" class="rounded">Sick Leave Balance</th>
                <th scope="col" class="rounded">Action</th>
            </tr>
        </thead>        
<tbody>
<?php foreach($list as $value) {?>
    <tr id='<?php echo $value['IDSTAFFTABLE']; ?>'>
        <td><?php echo $value['FIRSTNAME']; ?> <?php echo $value['LASTNAME']; ?></td>
        <td><?php echo $value['POSITIONNAME']; ?></td>
        <td><input type="text" name="annualleave" class="annualleave" value="<?php echo $value['ANNUALLEAVE']; ?>"/></td>
        <td><input type="text" name="sickleave" class="sickleave" value="<?php echo $value['SICKLEAVE']; ?>"/></td>
        <td><input type="submit" name="submit" class="submit" value="Submit" /></td>            
    </tr>
    <?php } ?>
    </tbody>

Answer 1

First of all add a form to your html code inside the php foreach loop like this...

<!-- Making use of foreach...endforeach is much better -->
<!-- when using annotated php code in html -->

<?php foreach($list as $value): ?>
  <form action="something" method="post">
  <!-- Rest of the code remains same -->
  </form>
<?php endforeach; ?>

Then use this jquery to submit the specific form...

$('input.submit').click( function() {
    $(this).parent("form").submit();
});

This code will fire a click event whenever an input with class "submit" is pressed, and it will submit its parent form.