将 jQuery 序列化数组脚本与提交按钮相结合 - Combining jQuery Serialize Array Script with Submit Button

Combining jQuery Serialize Array Script with Submit Button

我使用以下表格允许访问者提交他们的测试答案：

<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脚本与表单相结合。我假设我用我的表单 ID 替换 #myform（"测验"）。但是我只是在页面底部发布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>

如果允许您使用 HTML5，那么您可以随时在必填输入字段上使用 required 属性以防止提交。

除此之外，serializeArray()返回一个对象数组，看起来像

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

因此，在您的 JavaScript 中，不要检查if(value == '')尝试if(value.value == '')因为您当前正在根据字符串而不是实际值检查对象。

尝试编辑脚本到这些

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