jQuery pass input value based on table row - php

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

Since you're using jQuery I'd do it like this. Remove the inline JavaScript and bind to the change event of the select elements.
var typeval,clientval;
$('select.typeval').change(function() {
//console.log($(this).parents('tr').find('input').val(), $(this).val());
typeval = $(this).val();
clientval = $(this).parents('tr').find('input').val();
});​
$(this).parents('tr').find('input').val(); //will give you the
client_id
$(this).val(); // will give you the value of the select item
You can then just drop those values into your AJAX call.
jsFiddle example

Answer 2

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 */
});
});​​​​​​​​​​​​

Answer 3

Give your select and input elements a unique id using php. Something like:
<input type="hidden" id="client_id$client_id" ...
<select name="movement[]" id="mov$client_id" ...
Then in your javascript function use php to include the client_id like this:
changeMovement(client_id)
then you can use the client_id to change whatever movement that corresponds like this:
var client = $("#client_id"+client_id).val();
var movement = $("#mov"+client_id).val();
For the unique ID, you probably want to use whatever variable is populating the value field of your hidden inputs of each row. I say that without knowing exactly where those numbers are coming from.

Answer 4

Using James' solution it would look like this:
then the jquery looks like this:
var movement = this.value
var client_id = this.parent().find(".clientval")

Answer 5

Check this working example.. http://jsfiddle.net/sushanth009/BZ5Wt/
You can get the ClientId of the selected row by using this line..
var client = $(this).parent().parent().find('.clientval').val();