Можно ли как-то для 2 разных форм сделать один обработчик?

Question

[Genri_Rus]

Есть 2 формы

Пример:

/Первая форма/

<form method="post" id="contacts-form">
    <input type="text" name="name" placeholder="Имя" class="form-text" id="name">
    <input type="tel" name="phone" placeholder="Телефон" class="form-text" id="phone">
    <button type="submit" class="btn-send">Отправить</button>
</form>

/Вторая форма/
<form method="post" id="contacts-form">
    <input type="text" name="name" placeholder="Имя" class="form-text" id="name">
    <input type="tel" name="phone" placeholder="Телефон" class="form-text" id="phone">
    <textarea name="message" id="message" placeholder="Сообщение" class="form-message"></textarea>
    <button type="submit" class="btn-send">Отправить</button>
</form>

Отмечу, что эти формы находятся на разных страницах
Можно ли как-то сделать все в одном обработчике и вот что в js

$(document).on('submit', '#contacts-form', function(e) {
        e.preventDefault();
        var send = $(this).serialize().trim();

        if (($('#name').val().length >= 3) && ($('#phone').inputmask('isComplete')) && ($('#message').val().length >= 9)) {
            $.ajax({
                type: "POST",
                url: "mailer/Sendmail.php", 
                data: send,
                success: function(data) {
                   
                },
                error:  function(xhr){
                  alert('Возникла ошибка: ' + xhr.responseCode);
                }
            });
        }
        return false;
    });
});

Как в данном случае отдельно проверить #message, если его нету в форме и при отправке формы чтобы не возникало никаких ошибок ?

P.S. В данном случае у меня только одна форма работает - №2. а первая выдает в консоли ошибки

Answer 1

[Антон Неверов]

/Первая форма/

<form method="post" class="contacts-form">
    <input type="text" name="name" placeholder="Имя" class="form-text" id="name">
    <input type="tel" name="phone" placeholder="Телефон" class="form-text" id="phone">
    <button type="submit" class="btn-send">Отправить</button>
</form>

/Вторая форма/
<form method="post" class="contacts-form">
    <input type="text" name="name" placeholder="Имя" class="form-text" id="name">
    <input type="tel" name="phone" placeholder="Телефон" class="form-text" id="phone">
    <textarea name="message" id="message" placeholder="Сообщение" class="form-message"></textarea>
    <button type="submit" class="btn-send">Отправить</button>
</form>

$(document).on('submit', '.contacts-form', function(e) {
        e.preventDefault();
        var send = $(this).serialize().trim();

        if (($(this).find('input[name="name"]').val().length >= 3) && ($(this).find('input[name="phone"]').inputmask('isComplete')) && ($(this).find('input[name="message"]').val().length >= 9)) {
            $.ajax({
                type: "POST",
                url: "mailer/Sendmail.php", 
                data: send,
                success: function(data) {
                   
                },
                error:  function(xhr){
                  alert('Возникла ошибка: ' + xhr.responseCode);
                }
            });
        }
        return false;
    });
});

С инпутами тоже самое сделайте.
Одинаковых id на странице у разных блоков быть не может. Только class могут повторятся.

Comments

[Genri_Rus]

Спасибо за ответ, а если у меня эти формы на разных страницах ?

То тогда как ?

[Антон Неверов]

Подключаете скрипт на обе страницы - и всё будет работать.

https://learn.javascript.ru/external-script

[Genri_Rus]

Антон Неверов, тогда у меня в консоли ругается на эту строчку:

if (($('#name').val().length >= 3) && ($('#phone').inputmask('isComplete')) && ($('#message').val().length >= 9))

Т.к. в первой форме нету #message

Answer 2

[Игорь]

А почему нет?

1. Вынесите обработчик в отдельный файл.
2. Подключите файл в ваших документах.

Итог

1 обработчик 2 документа.

Comments

[Genri_Rus]

Если бы так можно было, но у меня:

В данном случае у меня только одна форма работает - №2. а первая выдает в консоли ошибки

В консоли ругается на эту строчку:

if (($('#name').val().length >= 3) && ($('#phone').inputmask('isComplete')) && ($('#message').val().length >= 9))

Ведь в первой форме у меня нету textarea

[Игорь]

Genri_Rus, Пересмотрите логику.
Если не удаётся притянуть за уши, напишите 2 обработчика.
Я думаю в этом нет криминала.