how to add (for loop) inside jquery data:

Question

Hi,

I have this code to update users data, but I can't write the for loop inside jquery data!!

Is there any way to modify the follwing wrong code to be correctly

function DisactiveUser()
{
    var num_checkboxes = document.forms[0].elements.length-1;

    $.ajax({
    type: "POST",
    url:  "submit/php/users.php?do=disactive",
    data: for(i = 1; i <= num_checkboxes; i++)
          {
            "&chk"  + i + "=" + document.getElementById("check" + i).value +
            "&chkc" + i + "=" + document.getElementById("check" + i).checked +
          }
        success: function(html){
        $("#loading").html(html);
    }
    });

}

Answer 1

You can store it in a variable before like this:

function DisactiveUser()
{
    var myData = "";
    $(":checkbox").each(function(i) {
      myData += "&chk"  + i + "=" + $(this).val() + 
                "&chkc" + i + "=" + $(this).is(":checked");            
    });

    $.ajax({
      type: "POST",
      url:  "submit/php/users.php?do=disactive",
      data: myData,
      success: function(html){
        $("#loading").html(html);
      }
    });    
}

However, unless you need this specific format server-side, you may want to look at .serialize() to handle this.

Here, to make Pointy happy, here's an array route as well, this will perform better for a high number of checkboxes:

var myData = $(':checkbox').map(function() {
  return "chk"  + i + "=" + $(this).val() + 
         "&chkc" + i + "=" + $(this).is(":checked");
}).get().join('&');

Answer 2

You can build the data string prior to the $.ajax call, and then provide that:

function DisactiveUser()
{
    var num_checkboxes = document.forms[0].elements.length-1;
    var mydata;

    mydata = "";
    for (var i = 1; i <= num_checkboxes; i++)
    {
        mydata +=
            "&chk"  + i + "=" + document.getElementById("check" + i).value +
            "&chkc" + i + "=" + document.getElementById("check" + i).checked;
    }
    mydata = mydata.substring(1);   // Ditch the leading &

    $.ajax({
        type:    "POST",
        url:     "submit/php/users.php?do=disactive",
        data:    mydata
        success: function(html){
            $("#loading").html(html);
        }
    });
}

Answer 3

function DisactiveUser()
{
    var num_checkboxes = document.forms[0].elements.length-1;
    var data = '';

    for(i = 1; i <= num_checkboxes; i++)
    {
       data += "&chk" + i + "=" + $("check" + i).val() +
           "&chkc" + i + "=" + $("check" + i)[0].checked;
    }

    $.ajax({
        type: "POST",
        url:  "submit/php/users.php?do=disactive",
        data: data,
        success: function(html){
        $("#loading").html(html);
    }
    });

}

Answer 4

I usually run my jQuery calls like this:

jQuery('#time').change(function(){ jQuery.post( 'tasks.php?mode=mycompleted', { time: jQuery('#time option:selected').attr('id') }, function(xml) { showTasks(xml); } ); });

That's just an example of a case where I use jQuery to make an "Ajax" call to a PHP script. Anytime that #time gets changed it will post data to tasks.php. The function(xml) segment will call back a javascript function to handle the XML response retrieved from the script.

Hope that helps.

Answer 5

You can use the jQuery $.map function

data: $.map($('input:checkbox').filter(function() { return /^check\d+/.test(this.id); }), function() {
  var id = this.id.replace(/^[^\d]*(\d+)/, "$1");
  return "chk" + id + "=" + this.value + "&chkc" + id + "=" + this.checked;
}).get().join('&')

or something like that.