php processing multiple checkbox select with javascript

Question

I am creating a form with multiple checkboxes with the same name. I have included an option for the user to select the parent checkbox to check all the children. The javascript code below is used to select or deselect all check boxes.

function checkAll(field)
{
  i = 0;
  if(field[i].checked)
  {
    uncheckAll(field);
  }
  else
  {
    for (i = 0; i < field.length; i++)
      field[i].checked = true ;
  }
}

function uncheckAll(field)
{
  for (i = 0; i < field.length; i++)
  field[i].checked = false ;
}

Basically what I want to do is process the selections, when the form is submitted, by grabbing the children checkboxes that were selected using $_POST and do a database query, but in order for all the children checkboxes with the same name to show up in $_POST in an array, they need to have the square brackets attached to them, which unfortunately isn't supported by the javascript.

<div class ="county-select">
    <div><label for="franklin">Franklin County</label><input name="county[]" value="franklin" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townF)" /></div>
    <div><label for="oxford">Oxford Hills</label><input name="county[]" value="oxford" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townO)" />  </div>
    <div><label for="river-valley">River Valley</label><input name="county[]" value="river-valley" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townR)" /></div>
    <div><label for="city">City</label><input name="county[]" value="city" type="checkbox" class="noBorderIE" onClick="checkAll(document.frmEventExport.townC)" /></div> 
  </div>
    </div>
<div class="town-select"> 
  <div id="Franklin-county">
    <label for="avon">Avon</label><input name="townF" value="avon" type="checkbox" class="noBorderIE" /><br/>
    <label for="CV">Carrabassett Valley</label><input name="townF" value="carrabassett valley" type="checkbox" class="noBorderIE" /><br/>
    <label for="carthage">Carthage</label><input name="townF" value="carthage" type="checkbox" class="noBorderIE" /><br/>
    <label for="chesterville">Chesterville</label><input name="townF" value="chesterville" type="checkbox" class="noBorderIE" /><br/>
    <label for="CP">Coplin Plantation</label><input name="townF" value="coplin plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="DP">Dallas Plantation</label><input name="townF" value="dallas plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="eustis">Eustis</label><input name="townF" value="eustis" type="checkbox" class="noBorderIE" /><br/>

    <label for="farmington">Farmington</label><input name="townF" value="farmington" type="checkbox" class="noBorderIE" /><br/>
    <label for="fayette">Fayette</label><input name="townF" value="fayette" type="checkbox" class="noBorderIE" /><br/>
    <label for="FT">Freeman township</label><input name="townF" value="freeman township" type="checkbox" class="noBorderIE" /><br/>
    <label for="industry">Industry</label><input name="townF" value="industry" type="checkbox" class="noBorderIE" /><br/>
    <label for="jay">Jay</label><input name="townF" value="jay" type="checkbox" class="noBorderIE" /><br/>
    <label for="kingfield">Kingfield</label><input name="townF" value="kingfield" type="checkbox" class="noBorderIE" /><br/>
    <label for="livermore">Livermore</label><input name="townF" value="livermore" type="checkbox" class="noBorderIE" /><br/>
    <label for="LF">Livermore Falls</label><input name="townF" value="livermore falls" type="checkbox" class="noBorderIE" /><br/>

    <label for="MT">Madrid township</label><input name="townF" value="madrid township" type="checkbox" class="noBorderIE" /><br/>
    <label for="MV">Mount Vernon</label><input name="townF" value="mount vernon" type="checkbox" class="noBorderIE" /><br/>
    <label for="NS">New Sharon</label><input name="townF" value="new sharon" type="checkbox" class="noBorderIE" /><br/>
    <label for="NV">New Vineyard</label><input name="townF" value="new vineyard" type="checkbox" class="noBorderIE" /><br/>
    <label for="PT">Perkins township</label><input name="townF" value="perkins township" type="checkbox" class="noBorderIE" /><br/>
    <label for="phillips">Phillips</label><input name="townF" value="phillips" type="checkbox" class="noBorderIE" /><br/>
    <label for="rangeley">Rangeley</label><input name="townF" value="rangeley" type="checkbox" class="noBorderIE" /><br/>
    <label for="RP">Rangeley Plantation</label><input name="townF" value="rangeley plantation" type="checkbox" class="noBorderIE" /><br/>

    <label for="readfield">Readfield</label><input name="townF" value="readfield" type="checkbox" class="noBorderIE" /><br/>
    <label for="SRP">Sandy River Plantation</label><input name="townF" value="sandy river plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="strong">Strong</label><input name="townF" value="strong" type="checkbox" class="noBorderIE" /><br/>
    <label for="temple">Temple</label><input name="townF" value="temple" type="checkbox" class="noBorderIE" /><br/>
    <label for="vienna">Vienna</label><input name="townF" value="vienna" type="checkbox" class="noBorderIE" /><br/>
    <label for="weld">Weld</label><input name="townF" value="weld" type="checkbox" class="noBorderIE" /><br/>
    <label for="wilton">Wilton</label><input name="townF" value="wilton" type="checkbox" class="noBorderIE" /><br/>

  </div>

Does anyone know a way around this?? ..sorry for the length, btw

So your question is how to get the values that are selected ? But in function that your javascript keeps working ? — Vince V.
– Vince V., Commented Jul 22, 2011 at 20:14
jQuery isn't really necessary if this is all he needs, it's pretty simple JavaScript. — Shawn Steward
– Shawn Steward, Commented Jul 22, 2011 at 20:34

Shawn Steward · Accepted Answer · 2011-07-22 20:33:25Z

You can use the brackets in Javascript as long as you put it in a string. I tested this out below with your code and it looks like it should work how you need it.

JavaScript Code:

<script type="text/javascript">
function checkAll(parent, field)
{
    var children = document.getElementsByName(field);
    var newValue = parent.checked;
    for (i = 0; i < children.length; i++){
        children[i].checked = newValue;
    }
}
</script>

HTML Content Snippet:

<div class ="county-select">
  <div><label for="franklin">Franklin County</label><input name="county[]" value="franklin" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townF[]')" /></div>
  <div><label for="oxford">Oxford Hills</label><input name="county[]" value="oxford" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townO[]')" />  </div>
  <div><label for="river-valley">River Valley</label><input name="county[]" value="river-valley" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townR[]')" /></div>
  <div><label for="city">City</label><input name="county[]" value="city" type="checkbox" class="noBorderIE" onChange="checkAll(this, 'townC[]')" /></div> 
</div>
<div class="town-select">
    <div id="Franklin-county">
    <label for="avon">Avon</label><input name="townF[]" value="avon" type="checkbox" class="noBorderIE" /><br/>
    <label for="CV">Carrabassett Valley</label><input name="townF[]" value="carrabassett valley" type="checkbox" class="noBorderIE" /><br/>
    <label for="carthage">Carthage</label><input name="townF[]" value="carthage" type="checkbox" class="noBorderIE" /><br/>
    <label for="chesterville">Chesterville</label><input name="townF[]" value="chesterville" type="checkbox" class="noBorderIE" /><br/>
    <label for="CP">Coplin Plantation</label><input name="townF[]" value="coplin plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="DP">Dallas Plantation</label><input name="townF[]" value="dallas plantation" type="checkbox" class="noBorderIE" /><br/>
    <label for="eustis">Eustis</label><input name="townF[]" value="eustis" type="checkbox" class="noBorderIE" /><br/>
  </div>
</div>

Collectives™ on Stack Overflow

php processing multiple checkbox select with javascript

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related