使用jQuery在提交表单之前进行确认

Question

我正在尝试使用jQuery在表单提交之前添加确认步骤。 我在另一个Stack Overflow问题form confirm before submit中找到了一个好的示例，但我无法让它正常工作。 jQuery：

$(function() {
    $('form#delete').submit(function() {
        var c = confirm("Click OK to continue?");
        return c;
    });
});

模板:

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
    <input class="floatright" type="submit" value="Delete" />
</form>

我们如何实现这个目标？

- Hans de Jong

Answer 1

   $('#delete').submit(function(event){
     if(!confirm("some text")){
        event.preventDefault();
      }
    });

- iHadaj

Answer 2

你正在提交表单并在确认后进行检查，你需要执行反向操作。

JS:

$(function() {
   $("#delete_button").click(function(){
      if (confirm("Click OK to continue?")){
         $('form#delete').submit();
      }
   });
});

HTML:

HTML：

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
    <input id="delete_button" class="floatright" type="button" value="Delete" />
</form>

- brunozrk

---

我在一个“else”条件中添加了event.preventDefault();。 - campeterson

如果您以除点击此按钮之外的任何方式提交表单（例如，在另一个输入框中按回车键），则此方法将无法正常工作。因此，@user3311206的答案更好。 - Ben

为了跟进Ben的评论，他所提到的user3311206是指iHadaj在2010年4月4日的回答-https://dev59.com/YWAg5IYBdhLWcg3w9e0y#22989986。 - Scott Mitchell

Answer 3

在提交按钮上使用以下代码行。

onclick="if (confirm('some text')) return true; else return false;"

例子

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
<input class="floatright" type="submit"  onclick="if (confirm('some text')) return true; else return false;" value="Delete" />

- sharif779

Answer 4

按钮上的onclick解决方案（由sharif779提供）是唯一对我有效的解决方案，因为它实际上在执行提交事件之前拦截了它。

这只是展示了一个函数在按钮的onclick属性内部所能实现的可能性（可以通过js / jQuery轻松插入）。 https://www.w3schools.com/jsref/event_onclick.asp

var $confirm_message = "'Do you really want to change me?'";
var $save = jQuery('<button type="submit" onclick="if(confirm(' + $confirm_message + ')){return true;}else{jQuery(this).next().click();}">Save</button>');

我遇到的第一个问题是代码嵌入属性中引号混乱。我通过定义包含单引号的消息变量来解决这个问题。

第二个问题是：如果我只在确认对话框的else分支中返回false，它会起作用，但原始对话框仍然保持打开状态。因此，我添加了取消按钮的单击操作，该按钮位于保存按钮（同级）旁边。所以，jQuery(this).next().click();执行取消按钮的单击操作。

总之，这有效地防止提交事件，并通过先单击取消来实现。它与Edge和Firefox中的ENTER事件以及鼠标单击一样完美地工作。

- Chris75

Answer 5

请确保将您的代码放在$(document).ready()中，就像这样：

$(document).ready(function () {
    $('form#delete').submit(function() {
        var c = confirm("Click OK to continue?");
        return c;
    });
}); 

- Zvonimir Burić

Answer 6

    $(function() {
       $('form#delete').click(function(e) {
        e.preventDefault();
        var c = confirm("Click OK to continue?");
        if(c){
            $('form#delete').submit();
          }
      });
  });

    <form id="delete" action="www.google.com">
        <input id="deletesubmit" type="submit" value="Delete" />
    </form>

- Tuhin