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属性来阻止提交。

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

的对象数组

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

所以在您的javascript中，而不是检查if(value == '')尝试if(value.value == '')，因为您当前正在针对字符串检查对象，而不是实际值。

将jQuery Serialize Array Script与Submit Button相结合

2 个答案: