How to send dynamically generated variables via ajax, using post method - html

Question

I've an html page wich contains a table, some rows and inside any row i checkbox.
When i select a checkbox i will to delete the message BUT only when i click a red-button-of-death.
Example
table
tr(unique_id)
td [checkbox]
td Content
td Other content
[... and so on]
/table
[red-button-of-death]
Now, the delete of multi rows must be without the reload of the page so i set up an ajax function that work like this:
setup ajax object.
set the open method (post/get, url, true)...
wait for the response of the "url" page.... take a coffe, have a break.
got response, using jquery delete the row using the unique id of the rows.
jquery: popup a feedback for the action just done
jquery: update some counter around the page
So, i begin tryin to delete a single record and everything go fine, i has created a link on every rows that call the function to delete "single record" passing the id of the item.
But now i've to develop the multi-delete-of-doom.
the first thing that i've think was "i can envelop the table in a 'form' and send everything with the 'post' method".
That seems to be brilliant and easy....
but doesn't work :-|
Googling around i've found some example that seems to suggest to set a variable that contains the item to send... so, trying to follow this way i need a method to get the name/id/value (it's not important, i can populate an attribute with the correct id) of the selected checkbox.
Here the function that make the ajax call and all the rest
function deleteSelected() {
var params = null;
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("post", "./cv_delete_pm.php?mode=multi", true); //cancella i messaggi e ritorna l'id delle righe da cancellare
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status != 404) {
var local = eval( "(" + xmlhttp.responseText + ")" );
/*
//cancella gli elementi specificati dalla response
var Node = document.getElementById(local.id);
Node.parentNode.removeChild(Node);
loadMessagesCount('{CUR_FOLDER_NAME}'); //aggiorna sidebar e totale messaggi nel body
initTabelleTestate(); //ricrea lo sfondo delle righe
$("#msgsDeleted").attr("style", "left: 600px; top: 425px; display: block;");
$("#msgsDeleted").fadeIn(500);
$("#msgsDeleted").fadeOut(2000);
$("#msgsDeleted").hide(0);
*/
}
}
};
xmlhttp.send(params);
}
Actually the variable 'param' is set to null just because i'm doing some experimentation.
So, the questions
are:
- Is it possible to make an ajax request sending the content of the form? How?
- Is it possible to get the name/value/id (one of these) of all the selected checkbox of an html page? How?
Answer to one of these two question with the solution is enough to win my personal worship :)

Answer 1

Edit: I think you are using JQuery so look here: http://api.jquery.com/category/ajax/
You should be using a javascript frame work such as dojo or jquery to handle Ajax. Writing you own ajax functions from scratch is not recommended.
Some frameworks:
http://www.dojotoolkit.org/
http://www.jquery.com/ (http://api.jquery.com/category/ajax/)
http://mootools.net/
A jquery example (are you already using this framework?):
$.post("test.php", $("#testform").serialize());
A Dojo Example:
Submitting a form using POST and Ajax:
function postForm() {
var kw = {
url: 'mypage.php',
load: function(type, data, evt) {
dojo.byId("someElement").innerHTML=data;
},
formNode: dojo.byId("myForm"),
method: "POST",
error: function(type, data, evt){
//handle error
},
mimetype: "text/html"
};
dojo.io.bind(kw);
}

Answer 2

Update. Solved.
I've used the builtin function of jquery to manage the form sumbit using the $jQuery.post() function and the $(#idform).serialize() function. It's really late now but tomorrow i'll try to remember to paste here the correct code :)
Thanks for the answer anyway :)
Update (code below):
//Send by Post
function deleteSelected() {
$.post("./delete.php?mode=multi",
$("#pmfolder_form").serialize(),
function(data){
var local = eval( "(" + data + ")" );
//this delete the html via dom to update the visual information
for (var i = 0; i < local.length-1; ++i) {
var Node = document.getElementById(local[i]);
Node.parentNode.removeChild(Node);
}
});
}
The structure of the selectbox was something like:
<input type="checkbox" name="check_<? print $progressive_id; ?>" value="<? print $real_id; ?>"/>
That's all. :)