【问题标题】:Ajax form submit. form submitted twiceAjax 表单提交。表单提交两次
【发布时间】:2011-06-17 00:39:49
【问题描述】:

我正在使用 cakePHP,在我看来,我有一个带有 ajax 提交按钮的表单。我使用蛋糕助手渲染它。

    <form method="post" class="form-class" id="form-id" name="form1" style="display: none">
                *[content for the form]*
                    <?php
                    echo $ajax->submit('Ok',
                            array(
                                       'id'=> 'submit1',
                                        'url'=> array('controller'=>'c','action'=>'action1'),
                                        'complete'=> 'jsfunction()'

                                ));
                    echo $form->button('Submit',array('id'=>'cancel','value'=>'Cancel','onClick'=>'clickCancel()'));
                    ?>


</form>

当我点击提交时,控制器动作被调用了两次。如果存在此问题,我搜索了 stackOverlow 但找不到有效的解决方案。没有语法错误。

我们将不胜感激。谢谢。

【问题讨论】:

  • 你在不同的浏览器中检查了吗???
  • 你能显示生成页面中的任何代码吗? (我只能推测 $ajax->submit() 正在做什么,很高兴看到它似乎在客户端自动生成的 JS 代码)。
  • 我知道这无济于事,但我自己也遇到了同样的问题。我真的希望有人能够帮助解决这个问题。
  • 正如我对 OP 所说的,你能把生成的代码贴在某个地方,以便我们可以看到页面上应用了什么 JS 吗?

标签: ajax cakephp form-submit double-submit-problem


【解决方案1】:

听起来 ajax 事件处理程序并没有阻止默认行为。 尝试将表单的 onsubmit 行为设置为内联以防止它(就像 cake 的助手所做的那样):

<form onsubmit="event.returnValue = false; return false;" method="post" class="form-class" id="form-id" name="form1" style="display: none">

我建议您查看FormHelper,了解一些有用的快捷方式。

【讨论】:

    【解决方案2】:

    这是自动生成的代码:

     $("#submit1367508668").bind('click', function(){ 
         $.ajax({
                  async:true, 
                  type:'post', 
                  complete:function(request, json) {
                       getServerResponse(request)
                  }, 
                  url:'/recipients/add', 
                  dataType:'json', 
                  data:$(this).parents('form:first').serialize()}); 
                  blockUI(); 
         })
    

    【讨论】:

    • 好吧,我实际上使用 FormHelper 和 Ajax 助手来生成代码输出,我修改了选项以包含 event.returnValue = false 位,因为它是唯一缺少的东西,但仍然不行。
    猜你喜欢
    • 2015-04-04
    • 1970-01-01
    • 2013-12-10
    • 2013-05-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-16
    相关资源
    最近更新 更多