Show warning on form submit if no checkbox is check JavaScript

Question

I have placed an onsubmit function onto a form which checks to see if certain checkboxes are checked.

The problem I am having is that I only require one checkbox from each column to be checked, there are 3 columns in total with around 6 different checkboxes in each column - every checkbox in a column shares the same ID (this is what makes it hard for me).

The below script works, but it requires all of the boxes in each column to be checked, how can I modify it to still submit only if one checkbox in each column is checked.

<script type="text/javascript">
window.onload = function() {
    var form = document.getElementById('uwpqsffrom_731');
    form.onsubmit = function() {
        var no1 = 0, no2 = 0, no3 = 0;
    var list;
    list = document.getElementsByName('taxo[0][term][]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no1++;
       }
    }
    list = document.getElementsByName('taxo[1][term][]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no2++;
       }
    }
    list = document.getElementsByName('taxo[2][call]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no3++;
       }
    }
    list = document.getElementsByName('taxo[2][term][]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no3++;
       }
    }
    if ( no1 == 0 || no2 == 0 || no3 == 0 )
    {
        alert("Please select at least one option from each section");
        return false;
    }
    }
}
</script>

HTML:

You can see that there are everal checkboxes with the same ID - I only require 1 of them to be checked for the form to submit.

<form id="uwpqsffrom_731" method="get" action="http://test.com/">

<div class="uform_title">Find Your Perfect Venue</div><input type="hidden" name="unonce" value="a92b348757"><input type="hidden" name="uformid" value="731"><input type="hidden" name="s" value="uwpsfsearchtrg">

<div class="uwpqsf_class  tax-check-0 togglecheck">
<span class="taxolabel-0">Guests</span>
<input type="hidden" name="taxo[0][name]" value="number-of-guests">
<input type="hidden" name="taxo[0][opt]" value="1">
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="150-180">150-180</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="180-200">180-200</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="20-50">20-50</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="200-350">200-350</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="200-380">200-380</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="350-500">350-500</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="50-65">50-65</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="500-1000">500-1000</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="65-150">65-150</label>
</div>

<div class="uwpqsf_class  tax-check-1 togglecheck">
<span class="taxolabel-1">Event Type</span>
<input type="hidden" name="taxo[1][name]" value="event-type">
<input type="hidden" name="taxo[1][opt]" value="1">
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner">Awards Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner-dance">Awards Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="barbat-mitzvah">Bar/Bat Mitzvah</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="cocktail-party">Cocktail Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner">Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner-dance">Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="networking-event">Networking Event</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="party">Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="vip-experience">VIP Experience</label>
</div>

<div class="uwpqsf_class  tax-check-2 togglecheck">
<span class="taxolabel-2">Venue Preference</span>
<input type="hidden" name="taxo[2][name]" value="venue-locations">
<input type="hidden" name="taxo[2][opt]" value="">
<label><input type="checkbox" id="tchkb-2" name="taxo[2][call]" class="chktaxoall">All Venues</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="london-dungeon">London</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="madame-tussauds">New York</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="sea-life">Russia</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="stardome-4d">Spain</label>
</div>

<div class="uwpqsf_class  uwpqsf_submit">
<input type="submit" id="uwpqsf_id_btn" value="Search" alt="[Submit]" class="usfbtn ">
</div>
</form>

Answer 1

Made some changes to your original javascript, but you should be able to just copy - paste my code over yours easily.

function test() {
var no1 = 0, no2 = 0, no3 = 0;
var list;
list = document.getElementsByName('taxo[0][term][]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no1++;
   }
}
list = document.getElementsByName('taxo[1][term][]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no2++;
   }
}
list = document.getElementsByName('taxo[2][call]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no3++;
   }
}
list = document.getElementsByName('taxo[2][term][]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no3++;
   }
}

if ( no1 == 0 || no2 == 0 || no3 == 0 )
{
    alert("Please select at least one option from each section");
    return false;
}

}

Sorry it's a little sloppy, I don't really handle javascript well without jQuery, and there were some limitations due to your markup (didn't change that at all as you said it was all generated by a pluging.

Anyway, here is a jsfiddle of it as well

(note: had to do the for twice for the last column as the names we're different ...)

(note2: if you can also use jQuery, I can clean it up really nicely)

If you require only one of the checkboxes from each column to be selected I would recomend using radio-buttons. If you can't, just change it to if ( no1 !=1 && no2 != 1 && no3 != 1 )

Answer 2

how can I modify it to still submit only if one checkbox in each column is checked.

You should make all your checkbox to have common name. Then iterate the checkbox with name, use document.getElementsByName('name')

Your html should look something like this:

150-180 180-200

var chkBox = document.getElementsByName('taxo');

for (var i = 0; i < chkBox.length; i++){
     if (chkBox.checked == true){

         submitForm();

         break;
     }
}

function submitForm(){
    //submit form
}