How to enable submit buttons only when all radio buttons are selected?

Question

I built a form that has 4 radio button groups as below. It also has 2 submit buttons. I'd like to prevent the user from submitting the form without selecting one radio button per group (ie, 4 radio buttons need to be selected for the form to submit).

I followed prior advice from posts here on SO about this,but they do not seem to work on groups of radio buttons. Do you have any advice on this?

Below is the HTML:

<form action="http://test/" method="post" accept-charset="utf-8">
<table>
    <tbody>
        <tr>
            <td><label><input type="radio" name="item_6" value="0" class="radio1"> foo</label></td>
            <td><label><input type="radio" name="item_7" value="0" class="radio2"> foo</label></td>
            <td><label><input type="radio" name="item_8" value="0" class="radio3"> foo</label></td>
            <td><label><input type="radio" name="item_9" value="0" class="radio4"> foo</label></td>
        </tr>
        <tr>
            <td><label><input type="radio" name="item_6" value="1" class="radio1"> bar</label></td>
            <td><label><input type="radio" name="item_7" value="1" class="radio2"> bar</label></td>
            <td><label><input type="radio" name="item_8" value="1" class="radio3"> bar</label></td>
            <td><label><input type="radio" name="item_9" value="1" class="radio4"> bar</label></td>
        </tr>

        <tr>
            <td><label><input type="radio" name="item_6" value="2" class="radio1"> baz</label></td>
            <td><label><input type="radio" name="item_7" value="2" class="radio2"> baz</label></td>
            <td><label><input type="radio" name="item_8" value="2" class="radio3"> baz</label></td>
            <td><label><input type="radio" name="item_9" value="2" class="radio4"> baz</label></td>
        </tr>
        <tr>
            <td><label><input type="radio" name="item_6" value="3" class="radio1"> hat</label></td>
            <td><label><input type="radio" name="item_7" value="3" class="radio2"> hat</label></td>
            <td><label><input type="radio" name="item_8" value="3" class="radio3"> hat</label></td>
            <td><label><input type="radio" name="item_9" value="3" class="radio4"> hat</label></td>
        </tr>
        <tr>
            <td><label><input type="radio" name="item_6" value="9" class="radio1"> user</label></td>
            <td><label><input type="radio" name="item_7" value="9" class="radio2"> user</label></td>
            <td><label><input type="radio" name="item_8" value="9" class="radio3"> user</label></td>
            <td><label><input type="radio" name="item_9" value="9" class="radio4"> user</label></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td><button type="submit" disabled="disabled" name="submit_form" value="save_more">
                Save & More</button>
            </td>
        </tr>
        <tr>
            <td><button type="submit" disabled="disabled" name="submit_form" value="save_logout">
                Save & LOGOUT</button>
            </td>
        </tr>
    </tbody>
</table>
</form>

The JS:

<script type="text/javascript">
$(function(){
    $("input[type='radio']").change(function(){
        $("input[type='submit']").prop("disabled", false);
    });
    });
</script>

You should subscribe to the submit event of the form tag, and event.preventDefault() to prevent submission if it matches your criterea. — HelloWorld, Jun 11 '16 at 22:03
this HTML is generated by looping in view (I'm using CodeIgniter) so yes if you have s suggestion please let me know — pepe, Jun 11 '16 at 22:12
You can use a combination of `isset()` and `count` the values. If one of those do not meet the criteria of `if(whatever <= x_integer){...}` (do something), which is the logic you can use. Possibly with a `foreach` with a key / pair value. — Funk Forty Niner, Jun 11 '16 at 22:13

score 4 · Answer 1 · edited May 23 '17 at 11:58

4

Simply add the attribute "required" to one of the elements of each group. HTML standards have it defined. The browser will take care of the rest.

Refer this similar question

edited May 23 '17 at 11:58

Community

1
1

answered Jun 11 '16 at 22:05

Swakeert Jain

776
5
16

I did as you said, enabled submit buttons -- and my HTML output is `` -- however the submit buttons do submit the form still -- am I doing anything wrong? – pepe Jun 11 '16 at 22:09
It's working here. It must be that your browser hasn't implemented this test. Try updating it. Or see the mentioned SO question, and try those examples. They all work here. – Swakeert Jain Jun 11 '16 at 22:13
since all these items are being generated dynamically on the view, every single radio button in every group has the `required` attribute. is that a problem? – pepe Jun 11 '16 at 22:16
well well... it looks like this is a safari (latest version) issue. it works as you said on firefox. what now? would a JS solution be more guranteed to be cross browser? do know of snippet that would work? your solution also works on chrome, BTW – pepe Jun 11 '16 at 22:19
Since it is a HTML standard, this is the best way to implement it. But most browsers do lack behind on providing implementation on validations. I do not know any code right now, but will EDIT my answer if I find or end up coding one myself. Yes mine is working on chrome and firefox. – Swakeert Jain Jun 11 '16 at 22:25

How to enable submit buttons only when all radio buttons are selected?

1 Answers1