表单提交jQuery不起作用

Question

我有那种形式

<form action="deletprofil.php" id="form_id" method="post">
            <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
                <button type="submit" name="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
                <button type="submit" name="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
            </div>
        </form> 

那个Popup来自 jQuery Mobile

<div class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup" tabindex="0" style="max-width: 1570px; top: 2239.5px; left: 599px;">
    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
        <div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
            <h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>
        </div>
        <div role="main" class="ui-content">
            <h3 class="ui-title">Sicher dass Sie das Profil löschen wollen?</h3>
            <p>Es kann nicht mehr rückgängig gemacht werden.</p>
            <a href="#" id="NOlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Abbrechen</a>
            <a href="#" id="OKlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
        </div>
    </div>
  </div>

用我的jQuery代码

<script language="javascript" type="text/javascript">
$(function(){
    $('#form_id').bind('submit', function(evt){
        $form = this;
        evt.preventDefault();
        $("#popupDialog").popup('open');
        $("#NOlink").bind( "click", function() {
            $("#popupDialog").popup('close');
        });
        $("#OKlink").bind( "click", function() {              
            $("#popupDialog").popup('close');   
            $( "#form_id" ).submit();         
        });         
    });
});    
    </script>

弹出窗口显示但表单提交不起作用.有人有什么想法吗？

Answer 1

头号错误是有什么关系submit的ID或NAME 在您的形式.

重命名表单元素,否则无法调用submit表单,因为提交方法/处理程序被名称/ id属性遮蔽.

其他几件事:

如上所述,您需要使用比jQuery更简单的事件来提交表单

但您还需要取消链接上的点击次数

顺便问一下,为什么你有两个按钮？由于您使用jQuery提交表单,除非您在单击时设置隐藏字段,否则您永远不会知道单击了哪两个按钮.

<form action="deletprofil.php" id="form_id" method="post">
  <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
  <button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
  <button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
  </div>
</form> 

 $(function(){
    $("#NOlink, #OKlink").on("click", function(e) {
        e.preventDefault(); // cancel default action
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") { 
          document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
        }
    });

    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});    

从你的评论来看,我认为你真的想这样做:

<form action="deletprofil.php" id="form_id" method="post">
  <input type="hidden" id="whichdelete" name="whichdelete" value="" />
  <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
  <button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
  <button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
  </div>
</form> 

 $(function(){
    $("#NOlink, #OKlink").on("click", function(e) {
        e.preventDefault(); // cancel default action
        $("#popupDialog").popup('close');
        if (this.id=="OKlink") { 
          // trigger the submit event, not the event handler
          document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
        }
    });
    $(".delete").on("click", function(e) {
        $("#whichdelete").val(this.value);
    });
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $("#popupDialog").popup('open');
    });
});  

Answer 2

因为当你调用$( "#form_id" ).submit();它时会触发外部提交处理程序,它会阻止默认操作,而不是使用

$( "#form_id" )[0].submit();       

要么

$form.submit();//declare `$form as a local variable by using var $form = this;

以编程方式调用dom元素的submit方法时,它不会触发附加到元素的提交处理程序

Answer 3

根据http://api.jquery.com/submit/

当用户尝试提交表单时,submit事件将发送到元素.它只能附加到元素上.可以通过单击显式<input type="submit">, <input type="image">或<button type="submit">,或者Enter 在某些表单元素具有焦点时按下来提交表单.

所以基本上,.submit是一个绑定函数,提交表单你可以使用简单的Javascript:

document.formName.submit().

Answer 4

由于每个控件元素都在表单元素上通过其名称进行引用（请参阅表单规范），因此名称为“submit”的控件将覆盖内置提交函数。

这导致了上面评论中提到的错误：

未捕获的类型错误：对象的属性“提交”#<HTMLFormElement>不是函数

正如上面接受的答案一样，最简单的解决方案是更改该控制元素的名称。

dispatchEvent然而，另一种解决方案可能是在表单元素上使用方法：

$("#form_id")[0].dispatchEvent(new Event('submit'));