jQuery pass input value based on table row

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>

You can add the input hidden into the same table data. Then do something along the lines of this.parent().find(".class") — James Kleeh
– James Kleeh, Commented Sep 7, 2012 at 17:08
Also, why set the data to a string instead of an object? { movement: movement, client_id: client_id, class_id: class_id } — James Kleeh
– James Kleeh, Commented Sep 7, 2012 at 17:10
If you leave your data as a string, you need to add "&" between variables: "movement="+movement+"&client_id="+client_id+"&class_ID"... — alanmanderson
– alanmanderson, Commented Sep 7, 2012 at 17:14

j08691 · Accepted Answer · 2012-09-07 19:59:31Z

2

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

edited Sep 7, 2012 at 19:59

answered Sep 7, 2012 at 17:15

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Colbyd Over a year ago

There are other hidden input in the table will that still work or do I some how need to target just the input that contains the client_id?

j08691 Over a year ago

You can modify it to be $(this).parents('tr').find('input.clientval').val() which should pickup the one you need. That will get the hidden input in the same row as you clicked. If there are more then one hidden input fields in each row that have that class let me know.

Colbyd Over a year ago

I posted my edited jQuery above. Im not getting a typeval not defined error. What I have done wrong?

j08691 Over a year ago

Oh, you just pasted my example into your code which won't assign any variables. What you want to do is create a pair of global variables and change them in the code I posted in my answer (console.log is only for development). Then in your AJAX call where you have typeval:typeval, client_id:clientval, use the global variables. I'll update the code in my answer a bit.

Colbyd Over a year ago

Does the function changeMovement go away now?

|

Oscar Jara · Accepted Answer · 2012-09-12 05:25:56Z

0

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

});

edited Sep 12, 2012 at 5:25

answered Sep 7, 2012 at 17:27

Oscar Jara

14.1k10 gold badges64 silver badges94 bronze badges

Comments

alanmanderson · Accepted Answer · 2012-09-07 17:06:47Z

0

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.

edited Sep 7, 2012 at 17:06

answered Sep 7, 2012 at 17:01

alanmanderson

8,31012 gold badges55 silver badges89 bronze badges

Comments

alanmanderson · Accepted Answer · 2012-09-07 17:17:30Z

0

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

answered Sep 7, 2012 at 17:17

alanmanderson

8,31012 gold badges55 silver badges89 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-09-07 17:18:10Z

0

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

answered Sep 7, 2012 at 17:18

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

jQuery pass input value based on table row

5 Answers 5

15 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

15 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related