結合jQuery序列化數組腳本和Submit按鈕

Question

我使用以下表格允許訪問者提交測試答案：

<form action="grade.php" method="post" id="quiz">
  <ol>
    <li style="display: none;">
      <?php echo join ($Base, ''); ?>
    </li>
  </ol>
  <input type="hidden" name="PreviousURL" value="<?php echo $MyURL; ?>" id="url" />
  <input type="hidden" name="user_token" value="<?php echo isset($_POST['user_token']) ? $_POST['user_token'] : '' ; ?>" />
  <input type="submit" value="Submit Quiz" />
</form>

如果用戶未回答所有問題，我想使用jQuery的序列化數組函數來防止表單提交。

但是我不明白如何將jQuery腳本與表單結合起來。 我假設我將#myform替換為表單的ID（“測驗”）。 但是，我是否只是將jQuery腳本發布在頁面底部？

我試過了，但是沒有用。 如果我只回答一個問題，然后單擊“提交”按鈕，該表單會將我轉發到結果頁面。

<script>
  $('#myform').submit(function(event){
  var answers = $('#myform').serializeArray();
  $.each(answers , function(index,value){
   if(value == ''){
   event.preventDefault();
   alert('you did not answer all the questions');
  });
</script>

Answer 1

嘗試編輯這些腳本

<script type="text/javascript">
    $("#quiz").submit(function(){
        var answers = $('#quiz').serializeArray();
        for(var i=0;i<answers.length;i++){
            if(answers[i].value == ''){
                alert('you did not answer all the questions');
                return false;
            }
        }
    });
</script>

Answer 2

如果允許使用HTML5，則始終可以在required字段中使用required屬性，以防止提交。

除此之外， serializeArray()返回的對象數組看起來像

{
    name: <input_name>,
    value: <input_value>
}

因此，在您的JavaScript中，不要檢查if(value == '') ，而是嘗試if(value.value == '')因為您當前正在根據字符串而不是實際值檢查對象。