Dynamically Setting Value With JQuery - php

Question

I have a table of assignments. Within each row is a cell, that when clicked will bring up a hidden div to the right of the table. Within the div is a form that allows a user to associate a selected document with a task.
Currently the table is generated, in part, by a PHP "for" loop; I am cycling through an array and creating a new table row for each array index.
Within each row there are two table cells. I want the contents of one of the cells to be a hyperlink that, when clicked, will display a hidden div. Within the hidden div will be a form. The form will have a hidden input box, and I would like to dynamically set this value when the hyperlink is clicked.
Here is a sample of the table:
<table>
<tr>
<th>Task</th>
<th></th>
</tr>
<?php
for($i=0; $i<sizeof($task_array); $i++)
{ ?>
<tr>
<td><?php echo $task_array[$i]['task'];?></td>
<td>Attach Doc</td>
</tr>
}
?>
</table>
Here is the hidden div and form:
<div id="hidden_div">
<form action="[url]" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
<input type="hidden" id="task_id" value="">
<input type="submit" name="submit" value="Submit" />
</form>
</div>
I know that I can do the following with JQuery to display the hidden div:
$("#hiddendiv").show();
I also know that the hidden field 'task_id' can be set with JQuery by using
$("#task_id").val() = 'some value';
The problem I am having is that, since the values are coming from an array, I'm not sure how to specify a specific value. For example, the value of a task id is found in the variable $task_array[$i]['task_id']. I could try this:
$('#show_div').click(function(){
$("#hiddendiv").show();
$("#task_id").val() = ???
});
I'm sort of stuck on specifying for which iteration to use the task id value.
My apologies if that wasn't very clear. Any help would be appreciated. Thanks.

Answer 1

PHP
<?php
for($i=0; $i<sizeof($task_array); $i++)
{ ?>
<tr data-task-id="<?php echo $task_array[$i]['task_id'];?>">
<td><?php echo $task_array[$i]['task'];?></td>
<td>Attach Doc</td>
</tr>
}
?>
See that I added a data-attribute named data-task-id to the tr elements that stores the task_id for that row. We can use this in a click event handler later.
JS
//bind an event handler to the `tr` elements for the `click` event to show the `tr`s children elements (the `td`s)
$('tr').on('click', function () {
$(this).children().show();
//this next line is how we get the `task_id` associated with a row
$(this).attr('data-task-id');
});
//since we bound an event handler to the `tr` elements for the `click` event it's a good idea to stop the propagation of click events on links within the `tr` elements so the event doesn't bubble up the the `tr` elements
$('tr').find('a').on('click', function (event) {
event.stopPropagation();
});
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().
Also, you need to change the #show_div element's ID for each element (IDs must be unique). I recommend just changing it to a class instead of using an id:
<td>Attach Doc</td>
Then you can bind an event handler to it like this:
$('.show_div').click(function(){
$("#hiddendiv").show();
$("#task_id").val($(this).parents('tr').eq(0).attr('data-task-id'));
});