CODEWITHSUNDEEP
phpjavascriptjqueryajax
Colbyd
Colbyd

Reputation: 371

jQuery pass input value based on table row

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>

Upvotes: 1

Views: 4356

Answers (5)

Oscar Jara
Oscar Jara

Reputation: 14187

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

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

Upvotes: 0

j08691
j08691

Reputation: 207901

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

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55750

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();

Upvotes: 0

alanmanderson
alanmanderson

Reputation: 8200

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")

Upvotes: 0

alanmanderson
alanmanderson

Reputation: 8200

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.

Upvotes: 0

Related Questions