Fatal编程技术网
  • jquery/
  • 表单提交jQuery不起作用

表单提交jQuery不起作用

jquery jquery-ui

表单提交jQuery不起作用,jquery,jquery-ui,Jquery,Jquery Ui,我有那张表格 <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=

我有那张表格

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

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


$（函数（）{
$（'#form_id'）.bind（'submit'，function（evt）{
$form=这个；
evt.preventDefault（）；
$（“#popupDialog”）.popup（'open'）；
$（“#NOlink”）.bind（“单击”，函数（）{
$（“#popupDialog”）.popup（'close'）；
});
$（“#OKlink”）.bind（“单击”，函数（）{
$（“#popupDialog”）.popup（'close'）；
$（“#表单id”）.submit（）；
});         
});
});
弹出窗口显示，但表单提交不起作用。 有人有什么想法吗？

根据

当用户尝试提交时，提交事件被发送到元素 提交一份表格。它只能附着到图元。表格可以 可以通过单击显式的
来提交，
或
，或按Enter键 当某些表单元素具有焦点时

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

document.formName.submit().
因为当您调用
$（“#form_id”）.submit（）时它触发外部提交处理程序，该处理程序阻止默认操作，而不是使用


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


或

当您以编程方式调用dom元素的submit方法时，它不会触发附加到元素的submit处理程序。第一个错误是表单中的保留字
submit
作为
ID
或
NAME
。

如果您计划在表单上调用
.submit（）
，并且表单在任何表单元素上都有
submit
作为id或name，那么您需要重命名该表单元素，因为表单的提交方法/处理程序被name/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');
    });
});    




安勒根
布勒根
$（函数（）{
$（“#NOlink，#ok link”）。在（“单击”，函数（e）{
e、 preventDefault（）；//取消默认操作
$（“#popupDialog”）.popup（'close'）；
如果（this.id==“OKlink”）{
document.getElementById（“表单id”）.submit（）；//或$（“\35;表单id”）[0]。submit（）；
}
});
$（'form#u id'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$（“#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');
    });
});  




安勒根
布勒根
$（函数（）{
$（“#NOlink，#ok link”）。在（“单击”，函数（e）{
e、 preventDefault（）；//取消默认操作
$（“#popupDialog”）.popup（'close'）；
如果（this.id==“OKlink”）{
//触发提交事件，而不是事件处理程序
document.getElementById（“表单id”）.submit（）；//或$（“\35;表单id”）[0]。submit（）；
}
});
$（“.delete”）。单击（“click”，函数（e）{
$（“#whichdelete”）.val（此.value）；
});
$（'form#u id'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$（“#popupDialog”）.popup（'open'）；
});
});  

如果提交功能中有一个错误，将执行提交功能。在其他句子中，当提交函数中存在一个错误时，防止默认值（或返回false）不起作用。
如果您正在执行表单验证，例如


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


再次检查您是否返回true。这似乎很简单，但我有


var finalReturn = false;



当表单正确时，validateForm不会对其进行更正，因此未作为finalReturn提交的表单仍然初始化为false而不是true。顺便说一句，上面的代码可以很好地处理地址、城市、州等问题。
好吧，这并不适用于OP的具体情况，但对于像我这样的人来说，如果他们来这里遇到类似的问题，我想我应该把它扔出去——也许可以省去一两个头痛

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


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





（附录2020：所有这些年后，我认为从中得到的更重要的教训是检查您的输入。如果我的函数费心检查它收到的参数是否确实是表单元素，那么问题就会更容易被发现。）
不要忘了用
关闭表单。这停止了submit（）对我的作用。
因为每个控件元素都在表单元素（）上以其名称引用，所以名为“submit”的控件将覆盖内置的submit函数

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

未捕获类型错误：对象
#
的属性“submit”不是函数

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

但是，另一种解决方案是对表单元素使用
dispatchEvent
方法：


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



有时，您必须将所有表单元素放入同一个div中

例如：-

如果您使用的是ajax，请使用modal提交

所以所有的元素都在模态体中


有时我们会在模式页脚中放置submit按钮。
您可以像这样使用jQuery：


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


在HTML中：


<form id="form" method="post">
    <input type="text" name="username" required id="username">
    <button type="submit">Submit</button>
</form>




提交


参考资料：



那么您在表单提交上附加了事件处理程序
Oo
jquery-1.10.2和jquery.mobile-1.4.2我使用document.forms[0]。submit（）代替
$form
使用带有
var
声明的局部变量。您使用name=“submit”的答案是：或
$form.submit（）
，因为
$form=这个
在
$（“#form_id”）的Scope中。bind（'submit'..
@f00bar是的…刚刚更新…对它很谨慎，因为它被声明为一个全局变量。我尝试了一下，但得到了错误：Uncaught TypeError:P

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



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



<form id="form" method="post">
    <input type="text" name="username" required id="username">
    <button type="submit">Submit</button>
</form>