Passing checkbox checked from jQuery to PHP in CodeIgniter

Question

I'm working on a PHP self-evaluation form that has 5 question categories with 10 questions each. In the beginning of the application, I have 5 checkboxes to represent these categories, and they are automatically checked. The idea is that whenever user unchecks a category, the questions of that category instantly disappear from the form, and when they check it again, they come back. Something that should be achievable with the help of jQuery and AJAX.

I made the checkboxes with CodeIgniter's form_helper:

for($i = 1; $i<=5; $i++) {
$this->formapp_model->printCatName($i);
$data = array('name'=>'category$i', 'id'=>'category$i', 'value'=>'$i', 'checked'=>TRUE);
echo form_checkbox($data);
}

And I have a function to printing all 10 questions of the category from database after their category id, which works fine when I just post them as they are:

$this->formapp_model->printCategory(1);
$this->formapp_model->printCategory(2);
$this->formapp_model->printCategory(3);
$this->formapp_model->printCategory(4);
$this->formapp_model->printCategory(5);

Using the help of this: Passing whether a checkbox is checked, via jQuery, to PHP I was able to gather that for the jQuery, I need something like

var category1 = $('#category1:checked').val();

in order to check if the checkbox has been selected. I also tried

var category1 = $('#category1:checked').post();

as it seemed logical to use post in order to PHP to recognize it.

And for the print selection something like

if (isset($_POST['category 1'])) { $this->formapp_model->printCategory(1); } else { echo "This category is not selected."; }

I tried this, but PHP doesn't recognize the message that jQuery is giving it, meaning the category's questions disappeared permanently, whether the checkbox was checked or not. I checked with echo var_export($_POST); and noticed that all the jQuery is printing out is: array ( ). The question mentioned above was very informative, but missed some info that I would have needed to get it to work. The asker was also using an array instead of separate variables so I don't know how to edit it properly.

I'm a complete newbie with jQuery and AJAX so I have a hard time grasping what I need in order to get jQuery and PHP communicate dynamically the way I described. I have run around stackoverflow to find similar cases, but none of them have quite had what I need. However, I deeply apologize in case this is a repeativive question. Thank you to anyone who helps!

Answer 1

PHP is server side, you need the questions to appear/disappear client side meaning you want to make that happen using jQuery itself (or regular js but since you're already loading jQuery it's quicker just to use the library itself).

To be honest I'm not really following how your view is working so I'll just give some basic code to give you the idea. You create the checkboxes and the questions giving each a unique ID. Then in the on click method for the check boxes you determine which questions to show.

HTML:

<div id="checkboxes">
    <input type="checkbox" id="box1" class="check" checked="checked"/>
    <input type="checkbox" id="box2" class="check" checked="checked" />
    <input type="checkbox" id="box3" class="check" checked="checked" />
    <input type="checkbox" id="box4" class="check" checked="checked" />
    <input type="checkbox" id="box5" class="check" checked="checked" />
</div>
<div id="question1" class="question">
    <p>Question 1</p>
</div>
<div id="question2" class="question">
    <p>Question 2</p>
</div>
<div id="question3" class="question">
    <p>Question 3</p>
</div>
<div id="question4" class="question">
    <p>Question 4</p>
</div>
<div id="question5" class="question">
    <p>Question 5</p>
</div>

jQuery:

$(".check").on("click",function(){
    var id = $(this).attr("id");
    var id2 = id.substr(id.length -1);
    var question = "question"+id2;
    if($(this).is(":checked"))
    {
        $("#"+question).css("display","block");
    } else {
        $("#"+question).css("display","none");
    }
});

Demo: http://jsfiddle.net/calder12/taSPX/1