1

I am making a simple quiz to get the number of correct questions answered by a person when he submits the 'submit' button. But, it is always giving Zero. Pls help.

$(document).ready(function(){
$('button').click(function(){
	var count = 0;
	if($('[name=q1]').val() == "Delhi"){count++;}
	if($('[name=q2]').val() == "Lotus"){count++;}
	alert(count);
});
});
<body> 

<div> 
<p>Question: What is capital of India?</p>

<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>

<div> 
<p>Question: What is the national flower of India?</p>

<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>

<button>submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

It is always giving '0', but if I select 'Delhi' and 'Lotus' it should give answer as 2.

1
  • You have entered in the "value" the answer in lowercase but control it made with the first reading in upper case Commented Feb 16, 2017 at 9:28

4 Answers 4

7

Two things:

  1. $('[name=q1]').val() will give you the value of the first element with name="q1", not the checked element. For that, add :checked.

  2. You're comparing "delhi" with "Delhi"; case matters.

$(document).ready(function() {
  $('button').click(function() {
    var count = 0;
    if ($('[name=q1]:checked').val() == "delhi") {
      count++;
    }
    if ($('[name=q2]:checked').val() == "lotus") {
      count++;
    }
    alert(count);
  });
});
<div>
  <p>Question: What is capital of India?</p>

  <input type="radio" name="q1" value="delhi"> Delhi
  <input type="radio" name="q1" value="mumbai"> Mumbai
  <input type="radio" name="q1" value="kolkata"> Kolkata
  <input type="radio" name="q1" value="lucknow"> Lucknow
</div>

<div>
  <p>Question: What is the national flower of India?</p>

  <input type="radio" name="q2" value="rose"> Rose
  <input type="radio" name="q2" value="lotus"> Lotus
  <input type="radio" name="q2" value="sunflower"> Sunflower
  <input type="radio" name="q2" value="tulip"> Tulip
</div>

<button>submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

0
0

You have an error in your Js code, and you have to select the checked inputs, your code selects just the first input

$(document).ready(function(){
    $('button').click(function(){
	    var count = 0;
	    if($('input[name=q1]:checked').val() == "delhi"){count++;}
	    if($('input[name=q2]:checked').val() == "lotus"){count++;}
	    alert(count);
    });
});
<body> 

    <div> 
        <p>Question: What is capital of India?</p>

        <input type="radio" name="q1" value="delhi"> Delhi
        <input type="radio" name="q1" value="mumbai"> Mumbai
        <input type="radio" name="q1" value="kolkata"> Kolkata
        <input type="radio" name="q1" value="lucknow"> Lucknow
    </div>

    <div> 
        <p>Question: What is the national flower of India?</p>

        <input type="radio" name="q2" value="rose"> Rose
        <input type="radio" name="q2" value="lotus"> Lotus
        <input type="radio" name="q2" value="sunflower"> Sunflower
        <input type="radio" name="q2" value="tulip"> Tulip
    </div>

    <button>submit</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">                        </script>

</body>

0

$(document).ready(function(){
$('button').click(function(){
	var count = 0;
if($('[name=q1]:checked').val() == "delhi"){count++;}
if($('[name=q2]:checked').val() == "lotus"){count++;}
	alert(count);
});
});
<body> 

<div> 
<p>Question: What is capital of India?</p>

<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>

<div> 
<p>Question: What is the national flower of India?</p>

<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>

<button>submit</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

2
  • You need to look for the values of radio button that is been checked by the user. And do check the case sensitivity of your code Commented Feb 16, 2017 at 9:48
  • Please add description explaining the answer.
    – jjj
    Commented Feb 16, 2017 at 10:07
0

Try to rename you values with a capital letter (lotus=>Lotus, etc).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.