Как мне применить код для каждой формы на сайте?

Question

[l2p]

Всем привет. Есть у меня форма отправки сообщений на сайте. Вот код - pastebin.com/EC3nWRhu
Код рабочий, но действует только для одной формы. Как мне подстроить его под все формы?
Мои попытки решить проблему - pastebin.com/3guGMqgY . Но увы не работает. Прошу помощи.

Answer 1

[Алексей Куреев]

Вот. Немного подправил код и зделал его jslint и jshint-free.
Для его использования, добавьте класс js-form для всех форм, использующих этот сценарий, а так же js-phone для всех полей для ввода телефона.

P.S. Катал на коленке, если не работает или есть вопросы - дайте знать, постараюсь помочь разобраться.

$(document).ready(function() {
    "use strict";

    var form = $(".js-form");

    form.on("submit", function(e) {
        var submit = form.find(".js-submit");

        // Если Вам приходится генерировать HTML
        // или модифицировать какие-либо текстовые значения,
        // всегда лучше вынести их в константы
        var SEND = "Отправить заявку";
        var SENDING = "Идет отправка...";
        var SENDING_COMPLETE = "Заявка отправлена";

        function validatePhone() {
            var phone = form.find(".js-phone");

            try {
                if (phone.val().length === 0) {
                    throw Error("Phone number can't be empty");
                }
            } catch (e) {
                phone.css({
                    "border-color": "#ff4500"
                });

                setTimeout(function() {
                    // Возвращаем значение цвета обводки в
                    // предыдущее состояние
                    phone.css({
                        "border-color": "auto"
                    });
                }, 500);

                return false;
            }

            return true;
        }

        if (validatePhone() === true) {

            var request = $.ajax({
                url: "send.php",
                method: "POST",
                beforeSend: function() {
                    submit.attr({
                        "disabled": true,
                        "value": SENDING
                    });
                }
            });

            request.done(function(response) {
                response = $.trim(response);

                if (response === "sent") {
                    submit.attr({
                        "value": SENDING_COMPLETE
                        // Возможно, здесь стоит убрать флаг disabled?
                    });
                } else {
                    // По идее, если что-то идет не так, Ваш скрипт должен
                    // выкидывать исключение, которое вы бы обрабатывали в
                    // методе fail. Но пока вы этого не сделали, придется писать через
                    // if-else
                    submit.attr({
                        "disabled": false,
                        "value": SEND
                    });
                }
            });

            request.fail(function(error) {
                // Когда PHP скрипт будет выкидывать ошибку, вы будете обрабатывать её здесь.
                console.error(error);
            });
        }

        // Предотвращаем стандартную обработку форму
        e.preventDefault();
    });
});

Answer 2

[Андрей Ежгуров]

Забудь об атрибутах id. По стандарту каждый id на странице должен иметь уникальное значение. Хочешь несколько форм - меняй id на class, или data-id.

Для атрибутов, не имеющих значений (существует / не существует) надо использовать не attr, а prop.

В общем:

$('.load_button').click(function (e) {
  e.preventDefault();

  var button = $(this),
      form = button.closest('form'),
//    phone = form.find('[data-id="obligatorily"]'); // Это для data-id="obligatorily"
      phone = form.find('.obligatorily'); // Это для class="obligatorily"

  if (phone.val().length == 0) {
    phone.css('border-color', '#ff4500');
    setTimeout(function () {
      phone.removeAttr('style');
    }, 500);
    return;
  }

  button.prop('disabled', true).attr('value', 'Идет отправка...');
  $.post("send.php", form.serialize(), function (result) {
    var r = $.trim(result);
    if (r == 'sent') {
      button.attr('value', 'Заявка отправлена');
    } else {
      $('#load_button').prop('disabled', false).attr('value', "Отправить заявку");
    }
  });
});

И да, @Petroveg прав - надо отслеживать submit, а не click. Но это уже сам.

Answer 3

[Евгений Петров]

$('#load').each(...)

Вы это серьёзно?)) На странице есть единственный элемент с уникальным значением id.

Убирайте id из элементов формы и работайте с именами полей — атрибут name. Они для этого и придуманы.
Для перебора форм (можно даже и для элементов — тут нужно смотреть) используйте пользовательские атрибуты data-....
Отслеживать нужно не click на кнопке, а submit для формы.