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>

it would really be helpful if you could add the HTML as well — Catalin Deaconescu
– Catalin Deaconescu, Commented May 22, 2014 at 12:26
Ok I added some exmple HTML,it's a massive form so I couldn't paste it all! — RuFFCuT
– RuFFCuT, Commented May 22, 2014 at 12:33
I don't see how they are separated into columns so I'm just going to guess. First of all, you can't use the same id for more than 1 checkbox. If you want to select multiple items by the same selector, use the class for that. Also, if you don't have the 3 columns separated from each other (either in distinct container or with classes or attributes) you need to go check each one individually. So I suggest if this is your actual HTML to change it. — Catalin Deaconescu
– Catalin Deaconescu, Commented May 22, 2014 at 12:42
Each column is contained within a separate container (div) the HTML code is just an example of the check boxes - I understand he issue regarding using the same ID on multiple checkboxes but I'm afraid this is out of my hands as it is a plugin generating the form. — RuFFCuT
– RuFFCuT, Commented May 22, 2014 at 12:43

Catalin Deaconescu · Accepted Answer · 2014-05-22 13:33:14Z

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 )

edited May 22, 2014 at 13:33

answered May 22, 2014 at 13:27

Catalin Deaconescu

4437 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

RuFFCuT Over a year ago

You my friend are awesome - it works perfectly in the jsfiddle, however when I place it on the site nothing happens, also nothing in the console related to it :(

Catalin Deaconescu Over a year ago

Did you add my code in the bind function you had, or did you keep it as a new function with onsubmit calling it ?

RuFFCuT Over a year ago

I think I know why, kind of stupid of me really - I need to place the onSubmit function to the form. Should I just take the first part from my script and tag it on the front?

Catalin Deaconescu Over a year ago

Should work in both cases yes. Either add the function to the form as onsubmit, or just paste my code (without the function) to the beginning of your code

RuFFCuT Over a year ago

Ok I have updated my question with theJavaScript code with the code you provided + wrapped it in my 'bind function' it's not working - does it look ok?

|

jhyap · Accepted Answer · 2014-05-22 13:09:42Z

0

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
}

answered May 22, 2014 at 13:09

jhyap

3,8496 gold badges30 silver badges49 bronze badges

1 Comment

RuFFCuT Over a year ago

Thanks for the answer, the problem is I need one box checked from each column (3 in total) - wouldn't this still send the form if one box is checked in total?

Collectives™ on Stack Overflow

Show warning on form submit if no checkbox is check JavaScript

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related