ajax checkboxes

**namtax** · Nov 22, 2007, 09:27

Hi..

I am trying to implement a system like googlemail where emails are removed using AJAX.

I am using the prototype library here....

I have my emails displayed in a HTML table, which is wrapped in a form

HTML Code:

<form name="ajaxmail">
<table id="emails">
  <thead>
    <tr>
      <th>Name</th>
      <th>Delete</th>
	      <th><a href="#" onclick="delete_emails()">delete</a></th>
    </tr>
  </thead>
  <tbody>
<cfoutput>
    <tr>
	    <td>#emailname#</td>
    <td>#subject#</td>
      <td><input type="checkbox" name="MessageNumber" value="#MessageNumber#" id="MessageNumber"><label for="#MessageNumber#">Delete #MessageNumber#</label></td>
    </tr>
	</cfoutput>
  </tbody>
</table>
</form>

The ajax for the delete_emails() function is

Code:

 function delete_emails() {
		 var messagenumber = $F('MessageNumber');
	     var url = '/ajax/emails_remove.cfm';
         var pars = 'messagenumber='+ messagenumber;
         var target = 'delete_success';
         var myAjax = new Ajax.Updater(target, url, {method:'post', parameters:pars});

    }

So the id of the checkbox which is checked is passed to the ajax call and added to the var pars...eg =messagenumber = 22

then the action page for the ajax "emails_remove.cfm", which contains the code to remove the relevant email by the id....

HTML Code:

<!--- contact POP server and delete the message --->
<cfpop action="delete" messagenumber="#FORM.messagenumber#"
server="mail.musicexplained.co.uk"
username="namtax@musicexplained.co.uk" password="dryryzer">..

However, the issue im having is that if the id of the email is greater than 9, the ajax call doesnt delete the email at all, and if i check more than one checkbox, the ajax call only deletes one email....

Hope this makes sense, any help would be appreciated

**namtax** · Nov 26, 2007, 01:18

been looking around on the net about this
i think i need to pass the ids of the checked checkboxes as a javascript array, and then convert the array, so coldfusion can deal with it on the database side..unsure of how to create the javascript array however...

**Raju Gautam** · Nov 26, 2007, 03:30

I am not sure passing the Array variable through, but you can collect the checked email ids into a hidden element separated with commas and pass this through AJAX to your coldfusion page. And split the ids into an array then you can delete in loop. I am not sure how the coldfusion code will be for that.

**namtax** · Nov 26, 2007, 11:03

hi, rajug.
How would you collect the checked email ids into a hidden element and pass this to the coldfusion page..
Have you managed to do something similar with PHP?

Thanks

**Raju Gautam** · Nov 27, 2007, 03:41

Hi namtax!
This is the JS and HTML code to to collect the ids. I have used PHP for creating dynamic form. I hope you can understand.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Checkbox</title>
<script language="javascript" type="text/javascript">
function CollegeID(obj){
	var frm 		= document.frm;
	var currentids 	= frm.ColletedIDs.value;
	var newids 		= "";
	if(obj.checked == true){
		if(currentids.length == 0)
			frm.ColletedIDs.value = obj.value;
		else
			frm.ColletedIDs.value = currentids + "," + obj.value;
	}
	else if(obj.checked == false){
		var arrIds = currentids.split(/,/);
		for(var i = 0; i < arrIds.length; i++){
			if(arrIds[i] != obj.value){
				if(newids.length == 0)
					newids = arrIds[i];
				else
					newids = newids + "," + arrIds[i];
			}
		}
		frm.ColletedIDs.value = newids;
	}
}
</script>
</head>
<body>
<form name="frm" id="frm" method="post" action="">
<strong>Collected ID: </strong>
<input type="text" name="ColletedIDs" id="ColletedIDs" style="width:200px;" /><br />
<strong>Messages:</strong><br />
<?php
$ArrMessage = array(1=>'Message 1', 2=>'Message 2', 3=>'Message 3', 4=>'Message 4', 5=>'Message 5', 6=>'Message 6', 7=>'Message 7');
foreach($ArrMessage as $msgid=>$message){
	?>
    <input type="checkbox" name="id[]" id="id[]" onClick="CollegeID(this);" value="<?php echo $msgid;?>" />&nbsp;<?php echo $message;?><br />
    <?php
}
?>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>

Now the values collected in the text box (which you can make it hidden later) you can send to the AJAX or your submitting page.

Feel free to PM if you need further help.

Good luck!

**namtax** · Nov 27, 2007, 13:10

magnificent...have got that to work..
Thank you muchly..

The SitePoint Forums have moved.

User Tag List

Thread: ajax checkboxes

Thread Tools

Display

ajax checkboxes

Bookmarks

Bookmarks

Posting Permissions