Prototype check if Checkbox is selected and pass its value in Params

Question

I have a below checkbox in my phtml file

<input type="checkbox" id="my_checkbox" name="my_checkbox">

Below code is used to pass params to controller file

$('checkbox_id').observe('click', function(e) {
            var checked = this.checked;
        });


new Ajax.Request("<?php echo $formAction;?>", {
           method: 'post',
           postBody: "mypostdata="+$('my_value').value,
           onComplete: function(data) {
                var mydata = data.responseText.evalJSON(true);
                $('shopping-cart-totals-table').update(mydata);
            }
    });

How can I check if the checkbox is clicked or not and pass its vale in postBody as params to my controller file ?

For example,

If checkbhox clicked, value = yes/true If not, value = no/false

How can I pass the aboove value, based on user's click as params ?

Thanks

Answer 1

Use this to determine if the checkbox is checked and store it in a variable as a bool value.

After that for postBody you could use:

"mypostdata="+$('my_value').value +"&isChecked="+isChecked;

Where isChecked is the js variable you stored the bool value in and it will be passed to the post param: isChecked

After Edit:

The checked variable in observer function should be a global variable. The var checked as it stands is local to the observer function.

you could do something like:

$('checkbox_id').observe('click', function(e) {
            var checked = this.checked;
            $(this).setAttribute('is_itchecked', checked);
        });

Then your Ajax code should become:

new Ajax.Request("<?php echo $formAction;?>", {
           method: 'post',
           postBody: "mypostdata="+$('my_value').value + "&isChecked=" $('checkboxMy').readAttribute('is_itchecked'),
           onComplete: function(data) {
                var mydata = data.responseText.evalJSON(true);
                $('shopping-cart-totals-table').update(mydata);
            }
    });

Here checkboxMy should be the id of the checkbox you are trying to check the status of.

Answer 2

Jordon try this

$(‘mycheckbox’).observe(‘click’, function(e){alert(‘checked = ‘ + this.checked);});

setting throught scripting:
$(‘mycheckbox’).checked = true;
$(‘mycheckbox’).setAttribute(‘checked’, true);
$(‘mycheckbox’).setValue(''); // will un-check/null value
$(‘mycheckbox’).setValue('anything'); // will check/on value
$(‘mycheckbox’).click(); // will toggle the checkbox

https://stackoverflow.com/questions/2617582/prototype-function-to-set-onclick-event-observer-in-checkboxes

Just like:

$('my_checkbox).observe('click', function(e){

alert('checked = ' + this.checked);
if($('my_checkbox').checked == true){
$('my_checkbox').setValue('true'); 
}else{
$('my_checkbox').setValue('false'); 
}


})

Answer 3

If the checkbox and the other element you mentioned are in the same form then you only need this.

Form.request('id-of-form', {
    onSuccess: function(data) {
        var mydata = data.responseJSON;
        $('shopping-cart-totals-table').update(mydata);
    }
});

Note that responseJSON is automatically filled when the Content-Type is application/json so be sure to set that in your controller.