Question

我有一张表格

<div id='formdiv'>
<form action='purchase.php' method="POST" id="purchaseform"> 
......

<input type="submit" value="Add Purchase" />
</form></div>

用户提交表格后......首先确认了确认表格：

$('#purchaseform').submit(function(){
    $('#formdiv').hide();
    $('#confirmdiv').show();

return false;   
});

确认div为：

<div id='confirmdiv'>
data to be confirmed....
<input type="button" value="Confirm" id = "confirmform"/> 
<input type="button" value="Cancel" id = "cancelform"/>


</div>

我试图在用户点击确认按钮

后提交表单

$('#confirmform').click(function(){
        $('#purchaseform').submit();
        $('#formdiv').show();
        $('#confirmdiv').hide();
    });

但表格没有提交......有谁知道我在这里做错了什么？

Answer 1

它没有提交是合乎逻辑的。毕竟，无论何时尝试提交，它都将转到您的提交事件处理程序，它始终返回false。您必须确保如果提交来自您的脚本而不是来自表单中的按钮，则会提交。一种方法是这样的：

var confirmed = false;
$('#purchaseform').submit(function(){
    if (!confirmed)
    {
        $('#formdiv').hide();
        $('#confirmdiv').show();

        return false;
    }
    else
    {
        confirmed = false;
        return true;
    }
});

$('#confirmform').click(function(){
    confirmed = true;
    $('#purchaseform').submit();
    $('#formdiv').show();
    $('#confirmdiv').hide();
});

可以轻松编辑以满足您的需求。另一种方法是将原始事件绑定到提交按钮而不是实际的提交事件，但是如果你这样做，如果你在表单中有一个文本字段并且用户按下，你可能会遇到麻烦在选中时输入。然后，这将直接提交，而无需确认，而在上述解决方案中，它将整齐地要求确认。

Answer 2

因为当你打电话给$('#purchaseform').submit();时，它会再次阅读你的第一个陈述

$('#purchaseform').submit(function(){
    $('#formdiv').hide();
    $('#confirmdiv').show();
    return false;   
});

尝试使用隐藏输入来指示数据是否已确认。在您的表单中放置一个隐藏的文本域

<div id='formdiv'>
<form action='purchase.php' method="POST" id="purchaseform">   

<input type="submit" value="Add Purchase" />
<input type="hidden" name="isconfirm" id="isconfirm" value="0" />
</form></div>

然后在你的另一个陈述中提出一个条件，然后再调用return false和其他函数

$('#purchaseform').submit(function(){
  var confirm = $("#isconfirm").val();
  if(confirm == 0) { 
      $('#formdiv').hide();
      $('#confirmdiv').show();

     return false; }

}）;

然后改变这个

$('#confirmform').click(function(){
    $("#isconfirm").val(1); //change the value to 1
    $('#purchaseform').submit();
    $('#formdiv').show();
    $('#confirmdiv').hide();

});

Answer 3

你想要一个确认对话框，首先我认为最好使用jquery ui对话框插件http://jqueryui.com/dialog/#modal-confirmation

以下是要使用的代码：

1-在您的确认对话框中添加“display：none”

    <div id='confirmdiv' style="display:none">
     data to be confirmed....
    </div>

删除确认事件
```
$('#confirmform').click ....
```

2-初始化你的对话

    $( "#confirmdiv" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Confirm": function() {
               $('#purchaseform').submit();
            },
            "Cancel": function() {
                $( this ).dialog( "close" );
            }
        }
    });

3-测试您的代码

4-这就是所有人

Answer 4

您要重写在

中提交表单时发生的情况

$('#purchaseform').submit(function(){
    $('#formdiv').hide();
    $('#confirmdiv').show();

    return false;   
});

相反，你如何使用

$('#purchaseform').find(":submit").click(function(e){
    $('#formdiv').hide();
    $('#confirmdiv').show();

    return false;
}

或者，当然，您可以在提交按钮上设置ID并使用它。

Answer 5

那是因为你的$（'＃confirmform'）。submit（）函数再次调用第一个提交函数。

表单不使用Jquery通过外部按钮提交

5 个答案: