javascript - jQuery onClickイベントが起動しない

Question

フォームにハードコードされた複数の選択肢テストをHTMLで作成しています。JavaScriptとjQueryを使用してフォームに関連するすべてのアクションを実行しています。しかし、私のonClickイベントは発射されていないようです。コンソールを見ると、id 'submission'を持つイベントにフックし、 'on'に移動し、clickイベントでsubmitAnswers（）関数を起動するのではなくブラウザを更新することがわかりました。

あなたは次のように e.preventDefault()を使用して submitボタンのデフォルトの動作を阻止する必要が

<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

submit-のために「提出」の名前を使用しないようにしてくださいこれは良い考えではありません。 私が見る唯一のエラーは、document.formsではなく、submitAnswers（）関数の文字がありません。document.formです。私はコードを試して、それは最新のFirefoxで動作します。あなたのコード内

Answer 2

、

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

Answer 3

が解決法1：ボタンにあなたの送信ボタンの種類を変更

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

対処方法2： 変更クリックイベントを送信して提出する

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

Answer 4

すべてのHTMLのFirsは無効です。両方の質問のラジオボタンには同じ名前属性があります。

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

スクリプト： - - ：

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同じ作業用のペンここで有効なマークアップです。

Answer 5

type="input"で入力をクリックするデフォルトの動作は、入力が含まれているフォームを送信することです。あなたはそれがフォームを送信したくない場合は、そのため

は、あなたが起きてから、フォームハンドラを提出追加し、デフォルトの動作を阻止する必要があります。

Answer 6

、

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

か、のonclick = "your_function_name（）" のように入力タグ自体に関数自体を呼び出すことができますに

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

を変更。あなたのコードのために、それはなります：

希望これは.. ..役立つでしょう！