Triple nested JS IF statement

Question

I'm having issues with a triple nested IF statement.

I have a form which has a question with two radio buttons, this question is not always visible. I want to capture the selection made, but as default the radio buttons aren't selected and are still visible in the source code but use CSS display:none to hide. Therefore I need to specify that the data for the selection is only sent (console log for testing) IF a selection is made.

The logic should be, if div is visible, check if Q3_1 selected, if true, send Yes, if false, check if Q3_0 selected, if true, send False, if not selected don't send.

I think it'd be better to have the logic as below, but I couldn't get this to work either.

If div visible and Q3_1 selected send Yes else If div visible and Q3_0 selected send No

Many thanks in advance.

$(function () {
    // Handler for .ready() called.
    if ($("[id^=divWantMedical]").is(":visible")) {
        if  (document.querySelector("[id$='PreexistingConditions.Question3_1']").checked == true){
            console.log("Send Yes");

        } else {
            if  ((document.querySelector("[id$='PreexistingConditions.Question3_0']").checked == true){
                console.log("Send No");

            } else {
                console.log("Don't send anything");

            }
        }
    }
});

Answer 1

There is an extra parenthesis after your if :

if  ((document.querySelector("[id$='PreexistingConditions.Question3_0']").checked == true) {

should be

if  (document.querySelector("[id$='PreexistingConditions.Question3_0']").checked == true){

Answer 2

For radio buttons, you should always make sure one is selected by default, otherwise the user can't return to the initial state (neither button checked) without reloading the page (or resetting the form, but reset buttons seem to be a dying breed).

In that case, one of the buttons must always be selected, so you'll always send either true/yes or false/no.

However, you seem to want to cover the case where neither are selected (perhaps to cancel submission and show an error message). So in simplified form, you want to do:

 function doCheck(el) { var form = el.form; if (form.isVisible.checked) { if (form.Q[1].checked) { form.result.value = 'Send Yes'; } else if (form.Q[0].checked) { form.result.value = "Send No"; } else { form.result.value = "Don't send anything"; } } else { form.result.value = 'Element not visible'; } } 

 <form onsubmit="return false"> <fieldset><legend>Logic test</legend> Visible?<input type="checkbox" name="isVisible" checked><br> Q3_0<input type="radio" name="Q"><br> Q3_1<input type="radio" name="Q"><br> <input type="button" value="Test" onclick="doCheck(this)"> <input type="reset"><br> </fieldset> <input name="result" readonly> </form> 

And if the element isn't visible, none of the if logic runs. I've use a checkbox to simplify the logic around whether or not the element is visible.