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>

来自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元素的提交方法时，它不会触发附加到元素的提交处理程序

Answer 3

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

当用户尝试时，提交事件将发送到元素提交表格。它只能附加到元素上。表格可以通过点击明确的<input type="submit">提交， <input type="image">或<button type="submit">，或按 Enter 当某些表单元素具有焦点时。

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

document.formName.submit().

Answer 4

如果submit函数中有一个错误，则执行提交函数。在其他句子中，当提交函数中存在一个错误时，防止默认（或返回false）不起作用。

Answer 5

如果您正在进行表单验证，例如

type="submit" onsubmit="return validateForm(this)"

validateForm = function(form) {
if ($('input#company').val() === "" || $('input#company').val() === "Company")  {
        $('input#company').val("Company").css('color','red'); finalReturn = false; 
        $('input#company').on('mouseover',(function() { 
            $('input#company').val("").css('color','black'); 
            $('input#company').off('mouseover');
            finalReturn = true; 
        }));
    } 

    return finalReturn; 
}

仔细检查你是否真的回来了。这看起来很简单，但我有

var finalReturn = false;

当表单正确时，它没有被validateForm更正，因此没有提交，因为finalReturn仍然被初始化为false而不是true。顺便说一句，上面的代码可以很好地与地址，城市，州等一起使用。

Answer 6

好吧，这不适用于OP的确切情况，但对于像我一样来到这里遇到类似问题的人来说，我应该把它扔到那里 - 也许可以省去一两个头痛。

如果您使用非标准“按钮”以确保未调用submit事件：

<form>
  <input type="hidden" name="hide" value="1">
  <a href="#" onclick="submitWithChecked(this.form)">Hide Selected</a>
 </form>

然后，当您尝试访问脚本中的this.form时，它将会出现未定义的内容。

相反，您可以将button与type="button"

一起使用

<form>
  <input type="hidden" name="hide" value="1">
  <button type="button" onclick="submitWithChecked(this.form)">Hide Selected</a>
 </form>

（尚未在浏览器中对此进行测试，因此有人可能需要打电话给我。）

Answer 7

请勿忘记使用</form>关闭您的表单。这阻止了submit（）为我工作。

Answer 8

由于每个控件元素都在表单元素（see forms specs）上以其名称进行引用，因此名称为“ submit”的控件将覆盖内置的commit函数。

这会导致上述注释中提到的错误：

未捕获的TypeError：对象#<HTMLFormElement>的属性'submit'不是函数

就像上面公认的答案一样，最简单的解决方案是更改该控件元素的名称。

不过，另一种解决方案是在表单元素上使用dispatchEvent方法：

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

Answer 9

您可以像这样使用jQuery：

A[np.flatnonzero(mask1)[mask2]] = -1

在您的HTML中：

$(function() {
    $("#form").submit(function(event) {
        // do some validation, for example:
        username = $("#username").val();
        if (username.length >= 8)
            return; // valid
        event.preventDefault(); // invalidates the form
    });
});

参考：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

Answer 10

有时候，您必须将所有form元素都放在同一个div中。

示例：-

如果您使用的是带有模式的Ajax提交。

所以所有元素都在模态主体中。

有时候，我们将提交按钮放在模式页脚中。

表单提交jQuery不起作用

10 个答案: