0

我有一个表格

<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();
    });

但是表格没有提交......任何人都知道我在这里做错了什么？

4

5 回答 5

1

这是因为当您调用时，$('#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();

});
于 2012-11-08T12:23:31.863 回答
1

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

这是要使用的代码：

1-在您的确认对话框中添加“显示：无”

    <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-这就是所有人

于 2012-11-08T12:31:05.557 回答
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();
});

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

于 2012-11-08T12:20:41.577 回答
0

您正在覆盖提交表单时发生的事情

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

    return false;   
});

相反，你如何使用

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

    return false;
}

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

于 2012-11-08T12:21:04.350 回答
0

那是因为您的 $('#confirmform').submit() 函数再次调用了第一个提交函数。

于 2012-11-08T12:21:39.993 回答