提交表单前确认

Question

我已经搜索了答案，但没有找到合适的！

我有一个简单的表格，

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

- sark9012

---

你之前使用的onclick代码是什么？ - AllisonC

你必须在表单被加载到文档后再添加监听器。使用window.onload来添加它，或者将脚本放在表单之后的页面中。 - RobG

不知道它必须在后面出现，但这很有道理。谢谢RobG。 - sark9012

javascript表单提交 - LF00

这个回答解决了您的问题吗？JavaScript表单提交-确认或取消提交对话框 - Flimm

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

- Michael J.V.

---

当我点击按钮时什么都没有发生？只是跳转到adminprocess.php页面！ - sark9012

你使用了我提供的标记吗？你的HTML中不包含我添加到表单中的ID元素，因此我无法通过 getElementById 方法获取它。 - Michael J.V.

我复制粘贴了代码，但它只是绕过了确认尝试。我会更新问题，告诉大家现在的情况。 - sark9012

当我尝试这个功能时，如果按“取消”，它仍会提交表单。难道它不应该防止表单提交吗？ - croc_hunter

你必须将 onsubmit 更改为 onclick。 - Ask Warvin

添加 event.preventDefault(); - Godstime John

Answer 2

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

- Greenisha

---

@RobG，您有点误解了。这个<form> <input type="submit" onclick="return confirm('Are you sure you want to do that?');"> </form>可以完美地工作。 - Greenisha

Answer 3

正确的事件是onSubmit()，应该附加到表单上。虽然我认为使用onClick也可能，但onSubmit才是正确的。

- Maxim Krizhanovsky

---

没有onsubmit事件。有一个名为onsubmit的HTML属性，但相关的事件是submit事件。 - RobG

好的，这是关于语义学的问题，因为onclick也不是事件，但我同意你的观点，因为你指出了正确的术语。 - Maxim Krizhanovsky

Answer 4

如果您已经在使用jQuery，您可以使用事件处理程序在提交之前触发。

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

Reference: http://api.jquery.com/submit/

- Atticus

---

不使用jQuery，但感谢您的建议。这绝对是我需要更多了解的东西。 - sark9012

如果你要使用JavaScript进行开发，我强烈建议使用jQuery。它提供了一个平台，许多你可能需要自己创建的函数已经被创建了。而且它非常可扩展。 - Atticus

有什么建议可以帮助我掌握这个呢？最简单的方法是去jQuery官方网站吗？ - sark9012

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

- antelove

Answer 6

在我的情况下，我没有表单ID，也无法在form标签中添加内联。最终我使用了以下jQuery代码。

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

- Rami Alloush

Answer 7

document.getElementById("myCoolForm").addEventListener('submit', function(event){
            event.preventDefault();
           
            var message = "Are you sure you want to perform this action?";
            
             if (confirm(message)) {
                    document.getElementById('myCoolForm').submit();
                    return true;
             }
             return false;
        });

- Godstime John

Answer 8

如果您有多个提交按钮执行不同的操作，可以按照以下方式处理。

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

- Dextr