未调用表单提交处理程序

form submit handler not getting invoked

本文关键字：程序 处理 表单提交 调用      更新时间：2024-05-10

我正在尝试记录来自提交处理程序的消息。。但它不起作用。。

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.");接到电话。。。请帮忙。。。

试试这个：

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

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

将有效地重新加载页面来提交您的表单。首先是return false，然后提交表格。

相关文章：