Question

我目前有一个php文件，其中包含一个像下面那样构建的表单。

echo '<form action="sampleform.php" onSubmit="return verify()" method="post">';
echo '<p>1. Which of the following is a Walt Disney cartoon character?</p><ul><li><input type="radio" name="q1" value="A" />&nbsp;<b>A.&nbsp;&nbsp;</b>Superman</li><li><input type="radio" name="q1" value="B" />&nbsp;<b>B.&nbsp;&nbsp;</b>Batman</li><li><input type="radio" name="q1" value="C" />&nbsp;<b>C.&nbsp;&nbsp;</b>Mickey Mouse</li><li><input type="radio" name="q1" value="D" />&nbsp;<b>D.&nbsp;&nbsp;</b>Spiderman</li><li><input type="radio" name="q1" value="?" checked style="display:none;" /></li></ul>';
echo '<div align="center"><input type="submit" name="submit" value="Click ONCE when finished." /></div>
<input type="hidden" name="submitted" value="TRUE" /></form></div>';

此php文件是在加载时通过附加头文件构建的。在该头文件中是以下脚本：

<script>
function verify(){
msg = "If you are sure you are finished, then select the OK button below. Otherwise, select the CANCEL button to return to the test.";
return confirm(msg);
}
</script>

现在一切正常，除了学生有时无法阅读提示并在完成之前再次按ENTER键过早结束测试会话。我需要的是一种方法来修改验证功能或者用一些东西替换它，该选项为学生提供两种选择，默认选择CANCEL，并阻止ENTER键做出选择。

我花了很多时间试图弄清楚如何使confirmOn https://github.com/invetek/jquery-confirmon这样的选项有效，但是我还没弄清楚。感谢您提供的任何帮助。

Answer 1

您可以使用像bootstrap 3这样的框架：http://getbootstrap.com/javascript/#modals 您可以轻松添加选项。

Answer 2

您指定的插件是一个直接的插件。

要使该插件正常工作，请确保已包含 jquery插件，jqueryui插件，jqueryui css（不确定）和确认插件。

然后点击按钮，使用：

$('#myButton').confirmOn('click', function(e, confirmed){
  //now confirmed parameter can be TRUE or FALSE depending up on the user choice and you can do the same.
  if(confirmed) deleteSomethingImportant();
    else {
        //If we need to, we can do some actions here if the user cancelled the confirmation
    }
});

为了给出自己的头衔，请使用：

$('#myButton').confirmOn({
     questionText: 'This action cannot be undone, are you sure?',
     textYes: 'Yes, I\'m sure',
     textNo: 'No, I\'m not sure'
},'click', function(e, confirmed) {
    if(confirmed) $(this).remove();
});

更改提交确认时使用此：

因此，如果 mySubmit 是提交带 myForm 的表单的按钮的ID，那么您可以使用as：

$("#mySubmit").confirmOn('click', function(e, confirmed){
  //now confirmed parameter can be TRUE or FALSE depending up on the user choice and you can do the same.
  e.preventDefault();//to stop default behavior of the submit
  if(confirmed) {
      //straight forward javascript code..
      $("#myForm").submit();
  };
    else {
        //If we need to, we can do some actions here if the user cancelled the confirmation
     return false;

    }
});

Answer 3

我已经解决了上面描述的问题，如果有兴趣的话，我已在http://www.gensoup.org/confirmon/this_works.html放置了一个示例文件。确认插件允许我控制Enter按键以避免提前提交表单。 Ankur Verma的回复帮助我指出了正确的方向。感谢。

使用Javascript和PHP控制表单提交

3 个答案: