CODEWITHSUNDEEP
javascriptjquery
Rails beginner
Rails beginner

Reputation: 14504

JavaScript if else statement not working

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.

Upvotes: 0

Views: 596

Answers (3)

Cecil Theodore
Cecil Theodore

Reputation: 9939

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');
            }
        });

    });

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

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

Upvotes: 1

James Allardice
James Allardice

Reputation: 165941

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.

Upvotes: 2

Related Questions