[jQuery] checkboxes, array and $.post

Hi,

I have a tabular data I need to be able to delete by selecting checkboxes, and submitting a form (a .php script then checks which checkboxes have been submitted, delete by id, return an updated list of the items injected into the dom).

My problem is that I currently can’t manage to gather these checkboxes values as an array.

Please consider the below code:


$(document).ready(function(){

    //submit the form
    $("form#form-delete").livequery('submit', function(event){
      $("span#wait").html('<img name="wait" src="wait.jpg" />');
      $.post("delete.php",{
              item_id: $(".item_id").val(),
        },function(data){
        $("span#wait").html('');
        $("div#view-items").html(data);
      });
      return false;
    });
});

And the html:


<input name="item_id" class="item_id" value="1" type="checkbox">
<input name="item_id" class="item_id" value="2" type="checkbox">
<input name="item_id" class="item_id" value="3" type="checkbox">
<input name="item_id" class="item_id" value="4" type="checkbox">
//etc.

What would be the ideal jQuery way to handle checkboxes?

Thanks in advance for your time :slight_smile:

Regards,

-jj.

I think something like this is what your looking for


<input name="item_id[]" class="item_id" value="1" type="checkbox">
<input name="item_id[]" class="item_id" value="2" type="checkbox">
<input name="item_id[]" class="item_id" value="3" type="checkbox">
<input name="item_id[]" class="item_id" value="4" type="checkbox">

so when you post the form assuming all four checkboxes are checked …



// the post value
$item_id = $_POST['item_id'];

// will be

$item_id = array(1,2,3,4);


Thanks for your reply :slight_smile:

I now need a jQuery way to gather this array… :slight_smile:

Here’s what I’m trying to do:

Problem, I can’t reach the alert(‘pushed’) and always get the alert(“Nothing selected!”);


$(document).ready(function(){

    var CheckedIDs = [];
    $("input.items_id").livequery('each',function(add){
     if(this.checked){
      alert('pushed');
      CheckedIDs.push($(this).attr("value"));
     }
    });

    //submit the form
    $("form#form-delete").livequery('submit', function(event){
      if (CheckedIDs.length == 0) {
        alert("Nothing selected!");
      }else{
        $("span#wait").html('<img name="wait" src="wait.jpg" />');
        $.post("delete.php",
          {
            analysis_id: CheckedIDs.join(","),
          },function(data){
            $("span#wait").html('');
            $("div#view").html(data);
          }
        );
      }//end else
      return false;
    });


  });

And the html


<input name="items_id[]" class="items_id" value="3" type="checkbox">

I can’t seem to find to what’s going wrong…

:slight_smile:

Not even sure if this will work with what you have but maybe it will give you another angle to look at.

I would start with some variation of this to make sure your picking up the values.


var checkedStuff = $("input.items_id").find(":checked").val()
      alert(checkedStuff);


after your sure your picking up the right value you can use .each()

Ok I’m getting closer… And thanks again for your help :slight_smile:

I can manage to have the checked checkboxes added to the CheckedIDs array. However, if I uncheck a checkbox, it is not removed from the array.

It’s the last little problem I have to solve :slight_smile:

Here’s my code:


var CheckedIDs = [];

    $("input.items_id").livequery('click',function(event){
      $("input.items_id").each(function() {
        if(this.checked){CheckedIDs.push($(this).attr("value"));}
      });
      //alert('clicked');
    });

Maybe have it unset the array when not checked



// if
  $("input.input_id").click().not().attr("checked", "true")
// clear the array and reset it


then run the function again to rebuild the array with remaining boxes checked? I’m guessing there is a more elegant solution but that might work. Not sure if that works but thats the idea anyway.

Thanks for your reply.

I think I must be missing something when it comes to $.post a form in jQuery. It seems too complicated to have to do something like this:


$.post("delete.php",{
              field1: $("#field1").val(),
              field2: $("#field2").val(),
              field3: $("#field3").val(),
              field4: $("#field4").val(),
        }

Isn’t there a way to simply post the whole form, with the whole post collection, to the specified url, without having to specify which field should be collected? That would make dealing with checkboxes much easier…

Here’s a sample form. How would you $.post-submit it?


<form name="test" id="test" method="post" action="script.php">

<input type="text" name="field1" id="field1"  value="" />
<input type="text" name="field2" id="field2"  value="" />
<input type="text" name="field3" id="field3"  value="" />
<input type="text" name="field4" id="field4"  value="" />

<input type="checkbox" name="city[]" class="cities" value="1" />
<input type="checkbox" name="city[]" class="cities" value="2" />
<input type="checkbox" name="city[]" class="cities" value="3" />
<input type="checkbox" name="city[]" class="cities" value="4" />
<input type="checkbox" name="city[]" class="cities" value="5" />

Regards,

-jj.