提交表单前确认答案

【问题标题】：Confirm before a form submit提交表单前确认
【发布时间】：2011-09-23 11:52:34
【问题描述】：

我已经搜索了答案，但找不到！

我有一个简单的表格，

<form action="adminprocess.php" method="POST">
    <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

在处理表单之前我应该如何调整它以确认？

我尝试了 onclick，但无法正常工作。

有什么想法吗？

更新 - 我现在拥有的。

<script type="text/javascript">
var el = document.getElementById('myCoolForm');

el.addEventListener('submit', function(){
return confirm('Are you sure you want to submit this form?');
}, false);
</script>

<form action="adminprocess.php" method="POST" id="myCoolForm">
     <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

【问题讨论】：

你的 onclick 代码是什么？
您必须在文档中的表单之后添加监听器。使用window.onload添加，或者在页面中将脚本放在表单之后。
不知道它必须在之后出现，但这是有道理的。谢谢 RobG。
javascript form submit
这能回答你的问题吗？ JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

标签： php javascript

【解决方案1】：

HTML：

<form action="adminprocess.php" method="POST" id="myCoolForm">
    <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

JavaScript：

var el = document.getElementById('myCoolForm');

el.addEventListener('submit', function(){
    return confirm('Are you sure you want to submit this form?');
}, false);

编辑：你总是可以像这样使用内联 JS 代码：

<form action="adminprocess.php" method="POST" onsubmit="return confirm('Are you sure you want to submit this form?');">
    <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

【讨论】：

当我点击按钮时什么都没有发生？直接进入 adminprocess.php 页面！
您使用了我提供的标记吗？您的 HTML 不包含我添加到表单中的 id 元素，因此我可以通过 getElementById 方法获取它。
我复制并粘贴了代码，它只是绕过了确认尝试。我将用我现在拥有的内容更新问题。
当我尝试这个时，如果按“取消”它仍然会提交表单。它不应该阻止表单提交吗？

【解决方案2】：

<input type="submit" onclick="return confirm('Are you sure you want to do that?');">

【讨论】：

@RobG 你有点误会了。这个<form> <input type="submit" onclick="return confirm('Are you sure you want to do that?');"> </form> 完美运行

【解决方案3】：

正确的事件是 onSubmit() 并且它应该附加到表单中。虽然我认为可以使用onClick，但onSubmit是正确的。

【讨论】：

没有 onsubmit 事件。有一个HTML属性名为onsubmit，但相关的事件是submit事件。
好的，这是关于语义的，因为 onclick 也不是事件，但我同意你的观点，因为你指出了正确的术语

【解决方案4】：

如果你已经在使用 jQuery.. 你可以在提交之前使用事件处理程序来触发

$(document).ready(function() {
   $("#formID").submit(function(){
      // handle submission
   });
});

参考： http://api.jquery.com/submit/

【讨论】：

不使用 jQuery，但感谢您的建议。绝对是我需要了解更多的东西。
如果您打算使用 javascript 进行开发，我强烈建议您使用 jQuery。它提供了一个平台，您可能必须在该平台上创建许多功能，这些功能已经创建。而且它非常可扩展。
对掌握它的最佳位置有什么建议吗？很简单的 jQuery 网站？

【解决方案5】：

var submit = document.querySelector("input[type=submit]");
  
/* set onclick on submit input */   
submit.setAttribute("onclick", "return test()");

//submit.addEventListener("click", test);

function test() {

  if (confirm('Are you sure you want to submit this form?')) {         
    return true;         
  } else {
    return false;
  }

}

<form action="admin.php" method="POST">
  <input type="submit" value="Submit" />
</form>

【讨论】：

【解决方案6】：

就我而言，我没有表单 ID，也无法在 form 标记中添加内联。我最终得到了以下 jQuery 代码

    var form = $("form").first();
    form.on('submit', function() {
        return confirm('Are you sure you want to submit this form?');
    });

【讨论】：

【解决方案7】：

如果您有多个提交按钮来执行不同的操作，您可以这样做。

<input TYPE=SUBMIT NAME="submitDelete"  VALUE="Delete Script" onclick='return window.confirm("Are you sure you want to delete this?");'>

【讨论】：