Bit of a long winded question but here it goes- I query a database and then return the values in a html table. The number of rows and columns in the table depends on the results of the query. I want the user to be able to get more information on each row. To do this the user will click one of a choice of images in the last column of each row (which image depends on the type of information they want). So I have basic html table stuff (simplified version):
<form name ="mainForm" enctype="multipart/form-data" action="getInformation.php" method="POST">
$query_header= "SELECT columns FROM tables where condition";
$result_header = mysql_query($query_header, $db);
$query_body= "SELECT columns FROM tables where condition";
$result_body = mysql_query($query_body, $db);
print <<<END
<table>
<thead>
<tr>
END;
while($myrow = mysql_fetch_row($result_header)){
echo "<th>$myrow[1]</th>";
}
print <<<END
<th>Choose More Info</th>
</tr>
</thead>
<tbody>
END;
while($myrow = mysql_fetch_row($result_body)){
echo "<tr>";
foreach($myrow as $m){
echo "<td>$m</td>";
}
/*** Here is where the user can choose to get more information on the row*/
print <<<END
<td>
<input class="img_button" type="image" height=15 width=15 align="middle" alt="Information regarding x" title="Information regarding x" value=$myrow[0] name="option1" src="../images/info_type1.png">
<input class="img_button" type="image" height=15 width=15 align="middle" alt="Information regarding y" title="Information regarding y" value=$myrow[0] name="option2" src="../images/info_type2.png">
</td></tr>
END;
} //end while
print <<<END1
</tbody>
</table>
</form>
END1;
Based on the name atribute passed to "getInformation.php" a certain action is performed and based on the elements value particular infomration is returned. This works fine! However, I want to use tablesorter, because a very many rows can be returned. So I change the class of the table to tablesorter etc. Everything still works fine until I acutally sort the table, then nothing works. So I saw the "jquery tablesorter and select all checkbox in table header" question on stackoverflow (an excellent community! ).
//So I added these elements to the form:
<input type="hidden" name="option1_global", value="default">
<input type="hidden" name="option2_global", value="default">
<script type="text/javascript">
$(function(){
$('.img_button').live('click', function(){
alert($(this).attr('value')); //this works - returns correct value based on which row clicked, even after sorting. Its great
if($(this).attr('name') =='option1'){
$('#option1_global').val($(this).attr('value')); //I'm sorry I had document.getElementByID.value previously and changed it - hence wrong subject line infirst post
}elseif($(this).attr('name') =='option2'){
$('#option2_global').val($(this).attr('value'));
}
document.mainForm.submit();
});
});
</script>
But the value of "optionx_global" passed to "getInformation.php" is always the default value. So I was thinking - is it incorrect to set the value of an element inside the .live() function? I think its clear I'm not an expert, but if I am doing something obviusly wrong I'd really like to know! Thanks a lot for any help!