get check box value dynamically using javascript

Question

we have list employees with email id using below code

<tbody>
<?php 
$sqlquery = mysql_query("select * FROM employee");
while($row=mysql_fetch_object($sqlquery)){                                  
?>  
<tr class="gradeA">
<td><input type="checkbox"  name="eid" value="<?php echo $row->emailid;?>" onclick="send_email_form_test()"><?php echo $row->name;?></td>
</tr>   
<?php }?>
</tbody>

when checkbox is clicked following function call,

 function send_email_form_test(){
var selected = new Array();     
$("input:checkbox[name=eid]:checked").each(function() { 
if($(this).val() !=""){
selected.push($(this).val());
}       
});

alert(selected.join(','));
var final_email = selected.join(',');
document.getElementById("to").value =final_email;
}

after click the checkbox,email ids are appears in "to" textarea field .when i will go to second page of the employee list, i cant able to get "to" textarea field,it will empty on the second page

   <div>
<label for="required">TO</label>
<textarea name="to"  cols="5" rows="10"></textarea> 
</div>

<div>
<label for="email">Subject</label>
<input type="text"  size="80" id="subject" name="subject" >
<input type="submit" name="submit" value="submit">
</div>

how to add and remove the email ids with comma separated,when i click the checkbox.I have issue on when i will go on next page of the pagination

Answer 1

You can add 'this' parameter to the Javascript function as onclick="send_email_form_test(this)"> then you will get the clicked checkbox object. Then you will be able to retrieve the value of the clicked check box

Answer 2

I did not test it, but I think this is how you could collect emails from all pages

<?php
    //...
    echo '<script>window.tablePage = ', $paginator->currentPage, ';</script>';
 ?>

<script type="application/javascript">
 //...
 pageSelected = selected.join(',');

 //get emails selected on other pages
 allSelected = JSON.parse(localStorage.getItem('emails'));

 //add currently selected emails
 allSelected[tablePage] = pageSelected;
 localStorage.setItem('emails', JSON.stringify(allSelected));

 //output emails from all pages
 document.getElementById("to").value = allSelected.join(',');
 //...
</script>

(JSON library is here: https://github.com/douglascrockford/JSON-js/blob/master/json2.js )