Question

我一直试图找到一种方法来在动态测验中呈现“提交”按钮，直到用户选择了每个问题的答案为止。我可以在答案的结束标记之前插入“必需”，但我有三种不同类型的答案 - 包括要求用户选择任意数量的复选框的问题。

解决方案似乎是一个jQuery脚本，需要为每个问题选择一个。但我无法得到任何工作。我想也许我只是没有让我的脚本与我的表格正确关联。

这是我的测试代码的一个例子：

<div class="Answer">
  <label class="Wide" for="q'.$QID.'-'.$Value.'"><div class="Radio"><input type="radio" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value="'.$Value.'" style="display: none;"> '.$Value.'. '.$QA.'</div></label></div>

这就是HTML的样子：

<li id="q7">
  <div class="Question">Media that pretend to be opposed to the mainstream media are called...</div>
  <div class="Answer">
    <label class="Wide" for="q7-A"><div class="Radio"><input type="radio" name="q7[]" id="q7-A" value="A" style="display: none;"> A. alternative media</div></label></div>
  <div class="Answer">
    <label class="Wide" for="q7-B"><div class="Radio"><input type="radio" name="q7[]" id="q7-B" value="B" style="display: none;"> B. soapboxes</div></label></div>
  <div class="Answer">
    <label class="Wide" for="q7-C"><div class="Radio"><input type="radio" name="q7[]" id="q7-C" value="C" style="display: none;"> C. underground media</div></label></div>
  <div class="Answer">
    <label class="Wide" for="q7-D"><div class="Radio"><input type="radio" name="q7[]" id="q7-D" value="D" style="display: none;"> D. yellow journalism</div></label></div>
</li>

这是处理一切的形式：

<div id="quiz2" rel="key" style="margin-top: 50px;">
  <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>
</div><!-- quiz-container -->

那么我需要做些什么来使以下jQuery与上面的一起工作？我将ID号更改为测验，匹配我的表格。我不明白“索引”是什么意思，但我尝试用一些变量替换“值”。什么都行不通。

<script>
var inputs = $('#quiz :input');

inputs.each(function(index, value) {
  if ($(value).val() == '') { //check if the input is empty 
    //return the error
    echo 'ERROR!';
  }
});
</script>

这是另一个看起来很有趣的脚本，但我不知道如何将它与我的表单相关联：

<script>
function checkInput() {
  var inputs = $("input");
  check = 0;
  for (var i = 0; i < inputs.size(); i++) {
    var iVal = $(inputs[i]).val();

    if (iVal !== '' && iVal !== null) {
     $(inputs[i]).removeClass('input-error');
   } else {
  $(inputs[i]).addClass('input-error');
  $(inputs[i]).focus(function() {
    $("input").removeClass('input-error');
    $(inputs[i]).off('focus');
    });
  check++;
   }
  }

if (check > 0) {
  return false;
 } else {
 return true;
 }
}

checkInput()
</script>

我一直在玩这两个脚本，操纵各种变量，但每次单击“提交”按钮而不回答问题时，它会将我转到下一页。

将jQuery脚本与测试结果

0 个答案: