Updating checkboxes

JavaScript
1

Hello all,

I’m not sure whether my thoughts on this are logical and correct but I
have a form with 4 checkboxes. I originally assigned a value of 1,2,3,4
to each one to differentiate between the results even though checkbox
results are normally on or off, or 1 or 0.

One more thought regarding coding is whether or not to actually use the
checkboxes individually named or as an array.
I chose to use them individually named here because there are only 4.

The actual problem I am having is in my update form where I recall the
values using php/mysql and then try to update the various checkboxes.
Although the values load into the assigned variables, after I submit the
updated form, I am not seeing the newly updated values.

I am not sure if my php coding is wrong or my understanding of javascript but
I would prefer to have all 4 of the checkbox values resubmitted.

I originally posted the following code in the php area as I though my problem
was there but after analyzing it further, I believe that the problem is with
the javascript.

Any thoughts and/or coding ideas to help clarify my lack of js knowledge?

2

Please post here some HTML code for the form, and the javascript that is used with it.

Also, please indicate where the javascript is located in relation to the form.

3

Only checked checkboxes will be submitted via HTTP.

Cheers,
D.

4

Hello pmw57,

I have just made a test page with some code to try to understand how this might work better but I still have not managed to accomplish getting all the variables to return.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
//<![CDATA[
function parse_chkbox() {
    var candidacy_id = new Array()

    var inputs = document.getElementsByTagName('input');
    for(var c = 0; c < inputs.length; c++){
        if(inputs[c].type == "checkbox") {
            if (candidacy_id[0] == "1") { 
                candidacy_id[0].value = "1";
            } else { 
                candidacy_id[0].value = "0";
            }
            
            if (candidacy_id[1] == "1") { 
                candidacy_id[1].value = "2";
            } else {
                candidacy_id[1].value = "0";
            }
            
            if (candidacy_id[2] == "1") { 
                candidacy_id[2].value = "3";
            } else {
                candidacy_id[2].value = "0";
            }
            // required
            if (candidacy_id[3] == "1") { 
                candidacy_id[3].value = "4";
            } else {
                candidacy_id[3].value = "0";
                { alert("Please accept conditions!"); return false; }
            }
        alert(candidacy_id);
        }
    }

    // validate checkbox - required
    var candidacy4 = document.getElementById( "candidacy4" ).checked;
    if(!candidacy4.checked) { alert("Please accept conditions!"); return false; }

/*
    var dataEl = document.getElementById('data');
    while(dataEl.childNodes.length > 0)
        dataEl.removeChild(dataEl.firstChild);

    var checkboxes = dataEl.parentNode.getElementsByTagName('INPUT');
    for(var i = 0; i < checkboxes.length; i++) {   
        if(checkboxes[i].getAttribute('type') == 'checkbox' && checkboxes[i].checked) {
            var form_id = document.createElement('INPUT');
                form_id.setAttribute('type', 'text');  // text
                form_id.value = candidacy_id[i];
                form_id.name = 'form_id';
            dataEl.appendChild(form_id);
            dataEl.appendChild(document.createElement('BR'));
        }
    }
*/
}
//return true;
//]]]>
</script>

</head><body>
<form name="boxes" id="form">
    <!-- initialize named checkboxes -->
    <input type="hidden" id="candidacy1" name="candidacy1"     value="0" />
    <input type="hidden" id="candidacy2" name="candidacy2"     value="0" />
    <input type="hidden" id="candidacy3" name="candidacy3"     value="0" />
    <input type="hidden" id="candidacy4" name="candidacy4"     value="0" />
    
    <!-- initialize checkbox array -->
    <input type="hidden" id="candidacy_id"  name="candidacy_id"   value="0" />

    <!-- individually named checkboxes -->
    <input type="checkbox" id="candidacy1" name="candidacy1" value="1" />a<br />
    <input type="checkbox" id="candidacy2" name="candidacy2" value="2" />b<br />
    <input type="checkbox" id="candidacy3" name="candidacy3" value="3" />c<br />
    <input type="checkbox" id="candidacy4" name="candidacy4" value="4" />d<br /><br />
    
    <!-- array checkboxes -->
    <input type="checkbox" id="candidacy_id"  name="candidacy_id" value="1" />e<br /><!--  onclick="parse_chkbox();" -->
    <input type="checkbox" id="candidacy_id"  name="candidacy_id" value="2" />f<br />
    <input type="checkbox" id="candidacy_id"  name="candidacy_id" value="3" />g<br />
    <input type="checkbox" id="candidacy_id"  name="candidacy_id" value="4" />h<br />

<br /><br /> <div id="data"></div>
<input type="submit" value="submit" onclick="parse_chkbox();" />
</form>
</body>
</html>
5

Okay, that’s a lot of checkboxes, and the javascript is completely screwed up. It may be best to start from afresh.

I’m going to nod off for a while, so please take this interim to explain precisely what you want to achieve with the script.

6

Okay, what I want to do is to re-parse each checkbox with values upon submit to avoid any array errors and for the submission of all data, so whether or not a checkbox is checked, it will give me a result.

Regarding the storage of a checkbox variable, which would be the preferred choice, string or numeric? I ask this because I read that it is boolean but I have set the storage as integer because I am not sure as to how (or if) the variable is affected by javascript when recalled using php.

The code above looks larger than it is only because I am testing it using individually named checkboxes versus a checkbox array. The final code will only have 4 checkboxes of which the last one is a required input.

Thank you for helping,

Peter

7

Sounds like you should be using radio buttons(with one of each selected by default), not checkboxes, if you want data submitted for each choice, always.

If you prefer to use checkboxes for the ui, a good way to go would be to use radio buttons by default. Then use javascript to hide the radio buttons, and create visible checkboxes(without any name attributes) which will alter the now hidden radio buttons, by checking the appropriate one depending on the state of each checkbox. This method requires zero javascript.

Another option is to supply a hidden text field for each checkbox. This will serve as the “unchecked” value. Your serverside code can then use that value. But if the checkbox is checked, the browser will send the name=value pair, and the serverside code can see it. For example


<input type="hidden" name="data[a123][uncheckedvalue]" value="0">
<input type="checkbox" name="data[a123][checkedvalue]" value="1">

<input type="hidden" name="data[b987][uncheckedvalue]" value="0">
<input type="checkbox" name="data[b987][checkedvalue]" value="1">

Yet another potential option is to just use checkboxes. Presumably, your serverside code generates the html, and knows the name of the checkboxes and the values. When a form submission is received, the default values are used unless a value was submitted. This is the simplest, but only works if your form processing script is capable of knowing the defaults(basically, you’re the author of that script).

8

No I believe that checkboxes are the correct choice here.

The problem came up after trying to do an update of the information.

Since I have searched the entire js forum on this, I decided it was time to really scrutinize the subject as I read that checkboxes and radio buttons are a sub-set of the input. Therefore I assume that they have the most problems.

9

You should know that javascript is not always always available, so to rely on using javascript to rely on javascript for form submissions is a fools errand.

It’s well and good to use javascript to improve the user experience, such as to let people know that they haven’ accepted the conditions before they submit the form, but you must not rely on javascript to sanitise the inputs for a couple of reasons. First, you can not depend on the fact that they will always be sanitised, and second, nefarious people will find ways around it to your detriment.

10

What, specifically, is the problem?