Блог

У меня есть две независимые формы с разными идентификаторами, но когда я пытаюсь отправить одну из них, они обе отправляются одновременно. Может быть, код 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);
});
  

Вы неправильно настраиваете обработчик отправки, прототипом для on является .on( events [, selector ] [, data ], handler ) то, что вы передаете идентификатор.
Поскольку вы выбрали документ и использовали .on() его, я предполагаю, что вы хотите использовать делегирование событий. Кроме того, у вас есть повторяющиеся идентификаторы в вашем HTML, каждый идентификатор должен быть уникальным.

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