Conditional radio button and disable submit button

Hi,

I have 2 radio buttons (both "yes" or "no") that user must check as "Yes" (2 yes) to be able to submit the form.

I need that if just one radio is "no" then the submit button is disabled and also a message inform the user that he must check yes to procede.

How can I do that?

Hi deltafidesign,

You'll need to write a custom validation, or a JavaScript snippet to check this. It not in the built-in valid actions.

Bob

Would you help me doing that?

Really really thanks in advice.

Hi deltafidesign,

I'm travelling this week, please remind me next week, after Mon 12, when I'm back in the office.

Bob

Really thank you. I appreciate this.

Have a nice week!

Hi GreyHead, hope you are back and can help me... 😀

Hi deltafidesign,

You will need to add ids to the submit button and the radio buttons on your form. Here I've used submit_btn for the submit button and input_radio_1 and input_radio_2 for the radio buttons. ChronoForms adds extra suffixes to the buttons in the group and you may have to look at the form HTML to check exactly what these are. In my case the Yes buttons were input_radio_1_1 and input_radio_2_1

Then this code in a Load JS action does what you need.

window.addEvent('domready', function() {
    $('submit_btn').disabled = true;
    $('input_radio_1_1').addEvent('change', checkYes);
    $('input_radio_2_1').addEvent('change', checkYes);

    function checkYes() {
        if ( $('input_radio_1_1').checked === true && $('input_radio_2_1').checked === true ) {
            $('submit_btn').disabled = false;
        } else {
            $('submit_btn').disabled = true;
        }
    }
});

Bob

Thanks for your help, but I cannot let it work.

I've cheked my code to find the radio options name, in my case I have 2 selections:

No -> input_radio_47_0
Yes-> input_radio_47_1

Then the submit button is -> input_submit

So I've replaced this way

    window.addEvent('domready', function() {
        $('input_submit').disabled = true;
        $('input_radio_47_0').addEvent('change', checkYes);
        $('input_radio_47_1').addEvent('change', checkYes);

        function checkYes() {
            if ( $('input_radio_47_0').checked === true && $('input_radio_47_1').checked === true ) {
                $('input_submit').disabled = false;
            } else {
                $('input_submit').disabled = true;
            }
        }
    });

But it doesn't work. Also the send button is not disabled even if not click over the radio.
I've also tryed to check this:

    window.addEvent('domready', function() {
        $('input_submit').disabled = true;
    });

to see id this at least would disable the button, and it doesn't work.


What's wrong?

Hi deltafidesign,

Please post a link to the form so I can take a quick look.

Bob

Hi deltafidesign,

The submit button doesn't have an id set.

Bob

No way.

I've tryed to load the JS before and after the "Show html" and still same issue now. The button do not send form and also the validation process on fields not filled doesn't work.

What's wrong?

Hi deltafidesign,

It looks as though you only have one pair of radio buttons and you are checking if both buttons are set to Yes. They can't be as only one of the pair can be selected.

Bob

I've partially solved changing the code you suggested me in this way:

window.addEvent('domready', function() {
    $('submit_1').disabled = true;
    $('input_radio_47_0').addEvent('change', checkYes);
    $('input_radio_47_1').addEvent('change', checkYes);

    function checkYes() {
        if ( $('input_radio_47_1').checked === true ) {
            $('submit_1').disabled = false;
        } else {
            $('submit_1').disabled = true;
        }
    }
});

You suggested me double check over the 2 radio for "checkYes" but I just need that the input_radio_47_1 is checked to enable the submit button.

So now it seems work fine, but, the validation for empty and requiered fields do not work if I do not check the input_radio_47_1. When it's checked the validation correctly show me the tooltip over the empty required fields when I click on the submit button, otherway it doesn't show the tooltip.

Any solution?

Hi deltafidesign,

I think that I misunderstood your first post where you said that you had two radio buttons that both had to be set to Yes.

It looks as though you only have one pair of radio buttons and the Yes button of that pair needs to be selected.

When the submit button is disabled it cannot trigger the validation. You could set the Validation option to On Blur and Submit on the form JS Validation tab (click the form Name link in the Forms Manager to see it). That should make the validation work when the user tabs between inputs.

Bob

Doesn't work. That's what I've done:

In the JS Validation tab I've setted "Enable JS Validation" to "yes", then "Errors event" to onSubmit & onBlur

But no way: the button is not default disabled and if fields are empty, when I click on the submit button, tooltips are not shown till I dont select the radio button that match the condition.

Hi deltafidesign,

Please post a link to the form so I can take a quick look.

Bob

Sent you a PM

Thanks

Hi deltafidesign,

It looks as though it is working correctly. The validation messages show while the submit button is disabled (checked in Chrome).

Bob

ok, thanks for support!