JavaScript if else statement not working

Question

I am having some problem with my if else statment for my radiobutton form. You can view it live here: http://jsfiddle.net/UDGGS/20/

Jquery:

$(document).ready(function() {

    $("input").click(function() {
        $check = true;
    });

    $("#next1").click(function() {
        if ($check) {
            $("boks1").hide();
            $("boks2").show();
        } else {
            alert('Pick one');
        }
    });

});

HTML:

<div id="boks1">
<h1>What would you like to answer? </h1>
<input type="radio" name="group1" value="0">Answer 1<br>
<input type="radio" name="group1" value="1">Answer 2<br>
<input type="radio" name="group1" value="2">Answer 3<br>
<div id="next1" style="border:1px solid black;">Next question<div>
</div>
<div id="boks2">
<h1>What would you like NOT to answer? </h1>
<input type="radio" name="group2" value="0">Answer 1<br>
<input type="radio" name="group2" value="1">Answer 2<br>
<input type="radio" name="group2" value="2">Answer 3<br>
<div id="next2">Next question 3<div>
</div>

CSS:

#boks2 {display:none;}
#next1 {display:block;}

Why is there not alert raised when I click on next and no radiobuttons have been selected? And why I am not shown the next question when I have selected one and clicked on the next div.

James Allardice · Accepted Answer · 2012-01-29 18:48:30Z

2

The problem is simply that you are missing the # from your id selectors:

$("#boks1").hide();
$("#boks2").show();

However, you should declare the $check variable in the parent scope of the two functions (so inside the ready event handler):

$(document).ready(function() {
    var $check = false;
});

Otherwise, if you click on the "next" button before selecting a radio button, $check will not be defined. And when it does become defined, it's in the global scope, which is not a good thing.

answered Jan 29, 2012 at 18:48

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

5 Comments

Dave Newton Over a year ago

Not actually true; works fine as long as $check is defined.

James Allardice Over a year ago

I didn't say it doesn't work, I just said $check won't be defined if you click on the button before clicking an input element, since $check is currently defined in the click event handler.

Dave Newton Over a year ago

(I was partially wrong anyway, I was referring only to the popup, not the hide/show, so never mind.)

Rails beginner Over a year ago

jsfiddle.net/UDGGS/32 Why is then the #boks2 not showed when I click next?

James Allardice Over a year ago

@Railsbeginner - Well spotted, I just noticed it too! Glad you got it working :)

Cecil Theodore · Accepted Answer · 2012-01-29 18:53:56Z

2

Defining the variable and then setting it to true when the input is clicked.

$(document).ready(function() {

    var = $check;

        $("input").click(function() {
            $check = true;
        });

        $("#next1").click(function() {
            if ($check) {
                $("#boks1").hide();
                $("#boks2").show();
            } else {
                alert('Pick one');
            }
        });

    });

answered Jan 29, 2012 at 18:53

Cecil Theodore

9,96910 gold badges33 silver badges38 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-01-29 18:53:26Z

1

Define the variable in the outer scope. Also the ids selectors inside if`` block are missing#`. Try this.

$(document).ready(function() {

    var $check; 
    $("input").click(function() {
        $check = true;
    });

    $("#next1").click(function() {
        if ($check) {
            $("#boks1").hide();
            $("#boks2").show();
        } else {
            alert('Pick one');
        }
    });

});

Demo

Instead of using variable to find if the radio button is checked or not you can do this.

Note: I am using $("input:checked").length > 0 to find out if any radio button is checked using :checked selector.

$(document).ready(function() {
    $("#next1").click(function() {
        if ($("input:checked").length > 0) {
            $("#boks1").hide();
            $("#boks2").show();
        } else {
            alert('Pick one');
        }
    });
});

Demo

edited Jan 29, 2012 at 18:53

answered Jan 29, 2012 at 18:47

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

6 Comments

Dave Newton Over a year ago

There's no need to make it global and pollute the global namespace; it can be defined in the on-ready function.

ShankarSangoli Over a year ago

Yes that can be done, edited my answer. I have provided alternative easy way also.

gion_13 Over a year ago

isn't the variable pinned to the global scope if it's declared in another scope without a var statement? I think that the problem lies within the bad jQuery selectors.

ShankarSangoli Over a year ago

Yes, the selectors are missing #, modified answer.

nrabinowitz Over a year ago

@gion_13 - yes, the $check variable is in the global scope - but this is a bad idea and Shankar is correct to rectify it.

|

Collectives™ on Stack Overflow

JavaScript if else statement not working

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related