CODEWITHSUNDEEP
javascriptjqueryhtml
Kgrover3
Kgrover3

Reputation: 3

JavaScript Quiz Valadition

I seem to be having some trouble validating a 4 question multiple choice quiz in JavaScript. Right now if none of the answers are selected the alert pops up, but if even only one answer is selected the alert doesn't pop. I'm running my function as an onclick for a submit button. I'm fairly new to JavaScript and JQuery but have other programming experience, so The problem is probably something simple but I cant see it. The function is:

function quiz1(){

    if (!$("input[@name=q1]:checked").val() ||
        !$("input[@name=q2]:checked").val() ||
        !$("input[@name=q3]:checked").val() ||
        !$("input[@name=q4]:checked").val() ||
        !$("input[@name=q5]:checked").val()
        ) {
        alert("You're not done yet!");
    }
}

The html is:

<p class="question">1. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
    <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>

<p class="question">2. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>
    <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>
    <input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>
    <input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>
</ul>

<p class="question">3. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Answer 1</label><br/>
    <input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Answer 2</label><br/>
    <input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Answer 3</label><br/>
    <input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Answer 4</label><br/>
</ul>

<p class="question">4. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q4" value="a" id="q4a"><label for="q4a">Answer 1</label><br/>
    <input type="radio" name="q4" value="b" id="q4b"><label for="q4b">Answer 2</label><br/>
    <input type="radio" name="q4" value="c" id="q4c"><label for="q4c">Answer 3</label><br/>
    <input type="radio" name="q4" value="d" id="q4d"><label for="q4d">Answer 4</label><br/>
</ul>

<div class="submit">
    <input type="submit" onclick="quiz1()" value="Check Answers">
</div>

Upvotes: -1

Views: 363

Answers (1)

James Harrington
James Harrington

Reputation: 3216

You have some syntax errors in there.

before:

function quiz1(){

    if (!$("input[@name=q1]:checked").val() ||
        !$("input[@name=q2]:checked").val() ||
        !$("input[@name=q3]:checked").val() ||
        !$("input[@name=q4]:checked").val() ||
        !$("input[@name=q5]:checked").val()
        ) {
        alert("You're not done yet!");
    }
}

After:

function quiz1(){

  if (!$("input[name='q1']:checked").val() ||
      !$("input[name='q2']:checked").val() ||
      !$("input[name='q3']:checked").val() ||
      !$("input[name='q4']:checked").val()
      ) {
      alert("You're not done yet!");
  }

}

so with jquery when you want to reference a name you have to type it just like the name attribute in the html that is true with any attribute selector E.G.(data='', ng-someting=''...) and also you had one to many inputs in there XD

here is a jsfiddle

Upvotes: 1

Related Questions