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

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

不提交是很合逻辑的。 毕竟，无论何时尝试提交，它将转至您的Submit事件处理程序，该处理程序始终返回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（）函数再次调用了第一个提交函数。