使用jQuery提交表单前的确认

ep6jt1vc  于 2023-04-11  发布在  jQuery
关注(0)|答案(6)|浏览(162)

我尝试在使用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>

我们如何才能做到这一点?

bjp0bcyl

bjp0bcyl1#

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

fae0ux8s2#

您正在提交的形式和后,正在检查确认,您需要的逆
JS:

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

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

hfwmuf9z3#

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

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" />
kpbpu008

kpbpu0084#

$(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>
nwlls2ji

nwlls2ji5#

确保将代码放在$(document).ready()中,如下所示:

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

avwztpqn6#

sharif 779(上面)的onclick解决方案是唯一对我有效的解决方案,因为它实际上在执行之前拦截了提交事件。
这只是为了展示按钮的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>');

我遇到的第一个问题是属性中嵌入的代码中的引号caos。我通过定义包含单引号的消息变量解决了这个问题。
第二个问题是:如果我只是在确认的else分支中返回false,它会工作,但原始对话框保持打开状态。所以我添加了cancel按钮的click操作,它位于保存按钮(兄弟)旁边。所以,jQuery(this).next().click();执行Cancel按钮上的click。
总之,这有效地防止了提交事件,它通过首先单击取消来实现。它在Edge和Firefox中的ENTER事件中的工作原理与鼠标点击相同。

相关问题