javascript - 尝试提交一个 Javascript 表单，然后提交两个表单

Question

我有两个具有不同 ID 的独立表单，但是当我尝试提交其中一个时，它们都同时提交。也许JS代码可以简化为两种形式的列数相同？

        <form method="post" action="#" id="formMor" class="Morning">
            <table id="formMor" class="Morning">


            <button id="save" class="Morning1" type="submit">Save</button>

        </form>



        <form method="post" action="#" id="formEven" class="Evening">
            <table id="formEven" class="Evening">

            </table>

            <button id="save" class="Evening1" type="submit">Save</button>

        </form>

和 script.js

'use strict';


$(document).on("formEven").submit(function(event) {
    event.preventDefault();

    var routineType = $("#formEven").attr('class');
    var newFormData = [];
    jQuery('#formEven tr:not(:first)').each(function(i) {
        var tb = jQuery(this);
        var obj = {};
        obj['Nr.'] = i;
        tb.find('input, textarea, select').each(function() {
            obj[this.name] = this.value;
        });
        newFormData.push(obj);
    });
    console.log(newFormData);

});

$(document).on("formMor").submit(function(event) {
    event.preventDefault();

    var routineType = $("#formMor").attr('class');
    var newFormData = [];
    jQuery('#formMor tr:not(:first)').each(function(i) {
        var tb = jQuery(this);
        var obj = {};
        obj['Nr.'] = i;
        tb.find('input, textarea, select').each(function() {
            obj[this.name] = this.value;
        });
        newFormData.push(obj);
    });
    console.log(newFormData);
});

标签： javascriptjqueryajax

Answer 1

您没有正确设置提交处理程序，on 的原型是.on( events [, selector ] [, data ], handler )您传递了一个 id。
由于您选择了文档并使用了.on()我将假设您想要使用事件委托。此外，您的 HTML 中有重复的 id，每个 id 应该是唯一的。

$(document).on("submit", "#formEven", function(event) {
    event.preventDefault();

    var routineType = $("#formEven").attr('class');
    var newFormData = [];
    jQuery('#formEven tr:not(:first)').each(function(i) {
        var tb = jQuery(this);
        var obj = {};
        obj['Nr.'] = i;
        tb.find('input, textarea, select').each(function() {
            obj[this.name] = this.value;
        });
        newFormData.push(obj);
    });
    console.log(newFormData);

});

$(document).on("submit", "#formMor", function(event) {
    event.preventDefault();

    var routineType = $("#formMor").attr('class');
    var newFormData = [];
    jQuery('#formMor tr:not(:first)').each(function(i) {
        var tb = jQuery(this);
        var obj = {};
        obj['Nr.'] = i;
        tb.find('input, textarea, select').each(function() {
            obj[this.name] = this.value;
        });
        newFormData.push(obj);
    });
    console.log(newFormData);
});


<form method="post" action="#" id="formMor" class="Morning">
    <table id="formMor-table" class="Morning">


    <button id="save-formMor" class="Morning1" type="submit">Save</button>

</form>

<form method="post" action="#" id="formEven" class="Evening">
    <table id="formEven-table" class="Evening">

    </table>

    <button id="save-formEven" class="Evening1" type="submit">Save</button>

</form>