表单提交jQuery不起作用

I have that form

我有那种形式

<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>

and that Popup from jQuery Mobile

以及来自jQuery Mobile的Popup

<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>

with my jQuery Code

用我的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>

The popup shows up but the form submit does not work. Does someone have any ideas?

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

7 个解决方案

#1

104

The NUMBER ONE error is to have ANYTHING with submit as ID or NAME in your form.

NUMBER ONE错误是在表单中以ID或NAME的形式提交任何内容。

Rename your form elements, otherwise you cannot call .submit() on the form since the submit method/handler is shadowed by the name/id attribute.

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

Several other things:

其他几件事：

As mentioned, you need to submit the form using a simpler event than the jQuery one

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

BUT you also need to cancel the clicks on the links

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

Why, by the way, do you have two buttons? Since you use jQuery to submit the form, you will never know which of the two buttons were clicked unless you set a hidden field on click.

顺便问一下，为什么你有两个按钮？由于您使用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');
    });
});

Judging from your comments, I think you really want to do this:

从你的评论来看，我认为你真的想这样做：

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

#2

Because when you call $( "#form_id" ).submit(); it triggers the external submit handler which prevents the default action, instead use

因为当你调用$（“＃form_id”）时.submit（）;它触发外部提交处理程序，阻止默认操作，而不是使用

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

要么

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

When you call the dom element's submit method programaticallt, it won't trigger the submit handlers attached to the element

当你调用dom元素的提交方法programaticallt时，它不会触发附加到元素的提交处理程序

#3

According to http://api.jquery.com/submit/

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

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

当用户尝试提交表单时，submit事件将发送到元素。它只能附加到元素上。可以通过单击显式，或

So basically, .submit is a binding function, to submit the form you can use simple Javascript:

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

document.formName.submit().

#4

if there is one error in the the submit function,the submit function will be execute. in other sentences prevent default(or return false) does not work when one error exist in submit function.

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

#5

If you are doing form validation such as

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

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

Double check you are returning true. This seems simple but I had

仔细检查你是否正确。这看起来很简单，但我有

var finalReturn = false;

When the form was correct it was not being corrected by validateForm and so not being submitted as finalReturn was still initialized to false instead of true. By the way, above code works nicely with address, city, state and so on.

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

#6

Alright, this doesn't apply to the OP's exact situation, but for anyone like myself who comes here facing a similar issue, figure I should throw this out there-- maybe save a headache or two.

好吧，这不适用于OP的确切情况，但是对于像我一样来到这里遇到类似问题的人来说，我应该把它扔出去 - 可能会让人头疼或两两次。

If you're using an non-standard "button" to ensure the submit event isn't called:

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

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

Then, when you try to access this.form in the script, it's going to come up undefined.

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

Instead, you can use a button with type="button"

相反，您可以使用type =“button”的按钮

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

(Haven't tested this across browsers yet, so someone might need to call me out on that.)

（还没有在浏览器上测试过这个，所以有人可能需要打电话给我。）

#7

Don't forget to close your form with a </form>. That stopped submit() working for me.

不要忘记用关闭表单。那停止了submit（）为我工作。

#1

104