Question

I know very little jquery so please excuse me if I don’t make much sense.

I have a table that it’s rows are populated from a php db query (the number of rows will vary) in this case there are two rows of data. Here is a portion of the php generated html table.

<table border=1 width=800px id=workout>
 <tr>
 <th width=300px id=clients>Client</th>
 <th width=200px id=movements>Movements</th>
 <th>X Completed</th>
 </tr>

<tr>
<td><input type="hidden" name="client_id[]" class="clientval" value="1"></td>   
<td>
<select name="movement[]" width=200 class='typeval' onchange='changeMovement()'>
              <option value="select">Select...</option>
              <option>Key Movement</option>
              <option>Movement -1</option>
              <option selected="selected" >Movement -2</option>
              <option>Movement -3</option>
              <option>Movement -4</option>
        </select>
</td>
<td><label id="count"></label></td>
</tr>

<tr>
<td><input type="hidden" name="client_id[]" class="clientval" value="8">
<td>
<select name="movement[]" width=200 class='typeval' onchange='changeMovement()'>
              <option value="select">Select...</option>
              <option>Key Movement</option>
              <option>Movement -1</option>
              <option selected="selected" >Movement -2</option>
              <option>Movement -3</option>
              <option>Movement -4</option>
        </select>
</td>
<td><label id="count"></label></td>
</tr>

I am passing the values of movement and client_id to a POST jquery so I can run a php query on the data and return result. How do I pass along the value of selected movement and client_id based on the row that the select menu is in.

For example: if user changes movement drop down menu on the 2nd row I want to send the client_id and the selected>Movement< to the jQuery function. Right now it is just getting the first row of my table and that is all.

Here is my edited jQuery:

Edited:

<script type="text/javascript">

var typeval,clientval, class_id;
$('.typeval').on('change', function(){
    movement =  $(".typeval option:selected").val();
    client_id = $(this).parents('tr').find('input.clientval').val();
    class_id = $(<? echo $class_id; ?>).val();

    //console.log($(this).parents('tr').find('input.clientval').val(), $(this).val());
    $.ajax(
    { url: "movement_count.php",
      type: "post",
      data: {typeval:typeval, client_id: clientval, class_id :},
      dataType: "json",
      });

    success: (function(output) {
    alert(output);
    $(".count").html(output);
    })
 });

</script>   

Answer 1

Well, you need to do the following:

1. Remove all onchange='changeMovement()', you won’t need them anymore.

2. Just echo the class_id from PHP.

3. Fix the way you get the client_id as below.

Code:

$(document).ready(function() {

    $('.typeval').change(function() {
        var movement = $(this).val();
        var client_id = $(this).parent().siblings().find('.clientval').val();
        var class_id = <?php echo $class_id; ?>;

        /* Do your AJAX call here */
    });

});​​​​​​​​​​​​