not picking up form values from checkbox

Question

I have a form in Cold Fusion which contains a set of checkboxes. I am submitting this form to the page frag5.cfm. There is only one line of code in frag5.cfm.

<cfoutput>values are  #form.f1# </cfoutput>

This line shows "values are " -- that is, the form values for the checkboxes, all with name f1 are not being picked up.

Is this the wrong way to pick up these values? Could someone tell me the right thing to do? The original form is below:

<form name      = "fields"
  action    = "frag5.cfm"
  method    = "post"       
  onkeypress = "return event.keyCode != 13;">  
<table style = "margin-left:165px" >
<caption style = "padding-top: 20px" >Restrict Report To: </caption>
<tr>
<td>Master Event:</td>
 <td><input type = "checkbox" 
            id   = "cb_e"
            name = "f1" 
            value = "" 
            onclick = ischecked("cb_e","hid_e")
            class = "check1">
 <label for = "cb_e">&nbsp; </label>
 <input type = "hidden" name = "finsel" id = "hid_e" value = "unchecked">
</td> 
<td style = "width: 25px"> &nbsp; </td>
<td>SubEvent:</td>
  <td><input type = "checkbox" 
             id = "cb_s" 
             value = "" 
             name = "f1"
            onclick = ischecked("cb_s","hid_s")                
            class = "check1" >
  <label for = "cb_s">&nbsp; </label></td>
   <input type = "hidden" name = "finsel" id = "hid_s" value = "unchecked">
  </td>     
  </tr>
</table>
<table style ="margin-left: 175px; margin-top: 20px;" >
<td style = "width: 150px;" id = "chuprep" class = ixes2">&nbsp;       
</td>
<td style = "width: 150px;"> 
 <input type = "Submit"
        name  ="Submitfin1" 
        class = "submitbut"            
        value = "Submit" > 
</td>
</tr>
</table> 
</form>

The code for ischecked is :

function ischecked(id, passid) {
//alert("got to ischecked" + id + passid);

var ischeck = document.getElementById(id).checked; 

if(ischeck){
document.getElementById(passid).value = "checked";}
else {
document.getElementById(passid).value = "unchecked";}

}//end function ischeck

Answer 1

If you are trying to check the values of unchecked checkboxes I don't think they will show up in the FORM scope. If the checkboxes are checked, then they should show up. You can use structKeyExists(FORM, 'f1') to check if a value exists.

Answer 2

Once thing to always do is to put quotes around your attribute values. They are not mandatory but they save you from issues like this one.

You didn't have any quotes ' (single or double) around onclick so the JS was not executing.

Adding those (and also modified your function a bit for confirmation) and I think it all works now. Can you try it?

function ischecked(id, passid){
    var ischeck = document.getElementById(id);
    console.log(ischeck.checked);

    if (ischeck.checked) {
      document.getElementById(passid).value = "checked";
      console.log( 'setting value to checked');
    } else {
      document.getElementById(passid).value = "unchecked";
      console.log( 'setting value to unchecked');
    }
  
  console.log( document.getElementById(passid).value );
    
  } //end function ischeck

<form name="fields" action="frag5.cfm" method="post" onkeypress="return event.keyCode != 13;">
  <table style="margin-left:165px">
    <caption style="padding-top: 20px">Restrict Report To:</caption>
    <tr>
      <td>Master Event:</td>
      <td>
        <input type="checkbox" id="cb_e" name="f1" value="" onclick='ischecked( "cb_e", "hid_e")' class="check1">
        <label for="cb_e">&nbsp;</label>
        <input type="hidden" name="finsel" id="hid_e" value="unchecked">
      </td>
      <td style="width: 25px">&nbsp;</td>
      <td>SubEvent:</td>
      <td>
        <input type="checkbox" id="cb_s" value="" name="f1" onclick='ischecked( "cb_s", "hid_s")' class="check1">
        <label for="cb_s">&nbsp;</label>
      </td>
      <input type="hidden" name="finsel" id="hid_s" value="unchecked">
      </td>
    </tr>
  </table>
  <table style="margin-left: 175px; margin-top: 20px;">
    <td style="width: 150px;" id="chuprep" class=i xes2 ">&nbsp;       
</td>
<td style = "width: 150px; "> 
 <input type = "Submit "
        name  ="Submitfin1 " 
        class = "submitbut "            
        value = "Submit " > 
</td>
</tr>
</table> 
</form>