How to send dinamically generated variables via ajax, using post method.

Question

Ok, the title isn't so easy to understand, i think.

First fact: I'm new to ajax.

Now on with the show :)

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:

1. setup ajax object.
2. set the open method (post/get, url, true)...
3. wait for the response of the "url" page.... take a coffe, have a break.
4. got response, using jquery delete the row using the unique id of the rows.
5. jquery: popup a feedback for the action just done
6. 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. :)