javascript - jQuery onClick event not firing

Question

I am creating a multiple choice test hard coded in a form in HTML, and I'm using JavaScript and jQuery to perform all my actions related to the form. However, my onClick event doesn't seem to be firing off. Looking in the console I found that it hooks into the event with the id 'submission' and it moves to 'on' and at the click event it refreshes the browser instead of firing the submitAnswers() function.

<form name="javaScriptQuiz" id="jsTest">

 <div class="form-group quiz-questions">
 <h3>1. First question is either true or false.</h3> 
  <label for="q1a">
   <input type="radio" name="q1" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q1" value="b"  id="q1b"> B. False &nbsp;
  </label>
  <h3>2. Second question is either true or false.</h3>
  <label for="q1a">
   <input type="radio" name="q1" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q1" value="b"  id="q1b"> B. False &nbsp;
  </label>
 <input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" id="submission">

</form>

$('#submission').on('click', function() {
        console.log('Submit fires');
        submitAnswers();                    
});

function submitAnswers() {
    var total = 2;
    var score = 0;

    //captures each of the questions answers in a variable
    var q1 = document.form['javaScriptQuiz']['q1'].value;
    var q2 = document.form['javaScriptQuiz']['q2'].value;

    //Validation
    for(var i = 1; i <= total; i++ ){
        if(eval('q' + i) == null || eval('q' + i) == ''){
            alert('You missed a question');
            return false;
        }
    }

    // Are the answers to test
    var answers = ['b', 'a'];
    for(var i = 1; i <= total; i++){
        if(eval('q' + 1) == answers[i - 1] ){
            console.log('Evaluating answers');
            score ++;
        }
    }
}

Answer 1

You need to prevent default behavior of submit button using e.preventDefault() as follows,

$('#submission').on('click', function(e) {
        console.log('Submit fires');
        e.preventDefault();
        submitAnswers();                    
});

Answer 2

Firs of all your HTML is not valid. The radio buttons for both the questions have same name attribute. Here's the valid markup:-

 <form name="javaScriptQuiz" id="jsTest">
 <div class="form-group quiz-questions">
 <h3>1. First question is either true or false.</h3> 
  <label for="q1a">
   <input type="radio" name="q1" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q1" value="b"  id="q1b"> B. False &nbsp;
  </label>
  <h3>2. Second question is either true or false.</h3>
  <label for="q1a">
   <input type="radio" name="q2" value="a" id="q1a"> A. True &nbsp;
  </label>
  <label for="q1b">
   <input type="radio" name="q2" value="b"  id="q1b"> B. False &nbsp;
  </label>
 <input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" onclick="return submitAnswers();" id="submission">

</form>

The script:-

function submitAnswers() {
  event.preventDefault();
    var total = 2;
    var score = 0;
    //captures each of the questions answers in a variable
    var q1 = document.form['javaScriptQuiz']['q1'].value;
    var q2 = document.form['javaScriptQuiz']['q2'].value;

    //Validation
    for(var i = 1; i <= total; i++ ){
        if(eval('q' + i) == null || eval('q' + i) == ''){
            alert('You missed a question');
            return false;
        }
    }

    // Are the answers to test
    var answers = ['b', 'a'];
    for(var i = 1; i <= total; i++){
        if(eval('q' + 1) == answers[i - 1] ){
            console.log('Evaluating answers');
            score ++;
        }
    }
}

Here's a working pen for the same.

Answer 3

Try not to use name 'submit' for submit-type elements, this is not a good idea. But the only error I see is missing s letter in function submitAnswers(): document.form instead of document.forms . I tried you code and it works in latest Firefox.

Answer 4

in your code, change

<input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" id="submission">

to

<input class="btn btn-primary btn-lg" type="button" name="submit" value="Submit!" id="submission"/>

or you can call the function itself in the input tag itself like onclick = "your_function_name()" . for your code, it will be:

<input class="btn btn-primary btn-lg" type="button" name="submit" value="Submit!" id="submission" onclick = "submitAnswers()"/>

Hope this helps..!!

Answer 5

solution1:change the type of your submit button to button

<input class="btn btn-primary btn-lg" type="button" name="submit" value="Submit!" id="submission">

solution2: change your on click event to form submit

$('#jsTest').on(submit,function(){
     ....});

Answer 6

The default behavior for clicking an input with type="input" is to submit the form that the input is contained within.

Therefore if you do not want it to submit the form, you need to add a form submit handler and prevent the default behavior from happening:

$('#jsTest').on('submit', function(e) {
    e.preventDefault();
})