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 ++;
        }
    }
}

change the button type from submit to button. because of submit it is submitting the form. And finally in your submit answers function if everything is right then use $('#Yourformid').submit(); — Nadeem
– Nadeem, Commented Dec 21, 2016 at 4:59

kay27 · Accepted Answer · 2016-12-21 05:11:47Z

1

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.

answered Dec 21, 2016 at 5:11

kay27

9097 silver badges17 bronze badges

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

1 Comment

Coffeeteer Over a year ago

Sorry, I took so long to answer back, but that was totally the issue. I'm still a little bit of a newbie so I appreciate the help. :)

ScanQR · Accepted Answer · 2016-12-21 05:02:48Z

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

answered Dec 21, 2016 at 5:02

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

1 Comment

kay27 Over a year ago

Why do you think he needs prevention? His function returns false - that's the prevention he already did. He has an error in accessing document.forms - missed s character, that's the only why he has browser undefined behavior.

abhinav · Accepted Answer · 2016-12-21 05:07:41Z

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.

This code I posted was an abbreviated version of what I originally created, I guess I missed something with the copy and paste. I can't believe I missed that. Thanks, for helping me find my errors though. :)

Raviteja · Accepted Answer · 2016-12-21 05:31:52Z

1

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..!!

answered Dec 21, 2016 at 5:31

Raviteja

961 silver badge8 bronze badges

1 Comment

Coffeeteer Over a year ago

Thanks I used your first suggestion. I'm still a little new to coding so can you tell me why 'button' is better than 'submit.' Just so I use it for future reference.

jam mok · Accepted Answer · 2016-12-21 05:03:55Z

-1

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(){
     ....});

answered Dec 21, 2016 at 5:03

jam mok

195 bronze badges

Comments

Tim Gupta · Accepted Answer · 2016-12-21 05:10:32Z

-1

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

answered Dec 21, 2016 at 5:10

Tim Gupta

1043 bronze badges

Collectives™ on Stack Overflow

javascript - jQuery onClick event not firing

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related