表单提交处理程序没有被调用答案

【问题标题】：form submit handler not getting invoked表单提交处理程序没有被调用
【发布时间】：2016-08-03 07:06:20
【问题描述】：

我正在尝试从提交处理程序记录一条消息..它不工作..

HTML 代码

<body>
<div class="table">
    <div class="thead">
        <div class="tr">
            <div class="td" style="background: #ffffff ;color:black">ABC</div>
            <div class="td">123</div>
        </div>
    </div>
    <div class="tbody">
        <form id="form1_id" name="sa" class="tr editing">
            <div class="td thead">test</div>
            <div class="td"><input type="number" id="sa_cr1" onchange="add('form1',1)"></div>
            <div class="td"><input type="number" id="sa_cr2" onchange="add('form1',2)"></div>
        </form>
        <form id="form2_id" name="bc" class="tr editing">
            <div class="td thead">test1</div>
            <div class="td"><input type="number" id="bc_cr1" onchange="add('form2', 1)"></div>
            <div class="td"><input type="number" id="bc_cr2" onchange="add('form2', 2)"></div>
        </form>
    </div>
     <button type="submit"  value="Store" onclick="submitForms();"> </button>
    </div>
</body>

JS 代码

function submitForms(){
    $('#form1_id')[0].submit();
    return false;
}

$("#form1_id").on("submit", function(event) // I tried both "submit" and "onsubmit"
{
       console.log("Handler for .submit() called.");
       event.preventDefault(); 
});
function add(str, num){};

您还可以在 https://jsfiddle.net/mdnak/b3z3h3jn/ 我基本上想要console.log("Handler for .submit() called."); 接到电话...请帮忙...

【问题讨论】：

标签： javascript jquery html forms form-submit

【解决方案1】：

试试这个：

$(document).ready(function(){

$("#submitbtn").click(function(){
    $('#form1_id').submit();
    return false;

});

$("#form1_id").submit(function(event)
{
      alert("Handler for .submit() called.");
       event.preventDefault(); 
});
function add(str, num){};

});

由于您是从中唯一选择#form1_id，您可以按上述方式直接提交，无需获取它的第一个元素，因为它不会提供表单数组$('#form1_id')[0]

并替换下面的行

<button type="submit"  value="Store" onclick="submitForms();"> </button>

与

<button type="button" id="submitbtn"> store </button>

【讨论】：

谢谢先生...它解决了我的问题！！但我仍然必须弄清楚为什么有问题的代码，虽然它采用了不同的方式，但没有工作......是关于数组..[0]..再次感谢您！
我观察到有几件事，第一件事是$('#form1_id')[0]，另一件事是按钮不在表单标签中，但类型是提交，它不应该在哪里。因为提交按钮总是应该在
标签中，所以当你点击它时，它会提交相应的表单。但在您的情况下，它是不同的，因为您有两个表单并且您正在使用 Javascript 处理表单，所以这里我们不需要提交按钮。您只需要一个事件来执行负责提交的代码。

【解决方案2】：

function submitForms(){
    $('#form1_id')[0].submit();
    return false;

}

将有效地重新加载页面提交您的表单。先return false再提交表单。

【讨论】：

但是在您建议的更改之后我没有在控制台中看到日志消息...我想确保它有效，因为我将使用 ajaxSubmit 通过单击一个按钮来提交多个表单的数据来自jquery.malsup.com/form/#getting-started的api