как сделать один ajax обработчик на несколько форм

392
18 июня 2022, 16:20

Хочу что бы отправляло текущую форму по клику на кнопку, в формах одинаковый класс .form и кнопки .submit-btn, у меня есть проверка на поля name и phone, когда форма заполнена и нажать отправить мне пишет что имя и тел не заполнены, как я понял проверяет все формы, но мне нужно только текущая. пробовал через target получить текущую но чтото не получилось. Собсна вопрос как получить текущую форму? формы:

        <form class="form" action="#">
            <input type="hidden" name="whatform" value="Форма - 1"/>
            <input class="form-input" type="text" size="30" maxlength="100" name="name"
                   placeholder="Имя *">
            <input class="form-input" type="tel" size="30" maxlength="100" name="phone"
                   placeholder="Телефон *">
            <div class="msg"></div>
            <button type="submit" class="btn submit-btn">Отправить</button>
        </form>
        <form class="form" action="#">
            <input type="hidden" name="whatform" value="Форма - 2"/>
            <input class="form-input" type="text" size="30" maxlength="100" name="name"
                   placeholder="Имя *">
            <input class="form-input" type="tel" size="30" maxlength="100" name="phone"
                   placeholder="Телефон *">
            <textarea name="message" cols="30" rows="4" placeholder="Сообщение"></textarea>
            <div class="msg"></div>
            <button type="submit" class="btn submit-btn">Отправить</button>
        </form>

js обработчик:

$(document).ready(function () {
    $('form').submit(function (e) {
            $.ajax({
                type: 'POST',
                url: 'mail.php', /
                data: $('form').serialize(),
                dataType: 'json',
                encode: true,
            })
                .done(function (data) {
                    if (!data.success) {
                        // if not ok
                        if (data.errors.name) {
                            $('.msg').html('<div class="alert-danger">' + data.errors.name + '</div>');
                        } else if (data.errors.phone) {
                            $('.msg').html('<div class="alert-danger">' + data.errors.phone + '</div>');
                        }
                    } else {
                        // if ok
                        $('.msg').html('<div class="alert-success">' + data.message + '</div>');
                        $('input, textarea').val(function () {
                            return this.defaultValue;
                        });
                        setTimeout(function () {
                            $('.msg').html('<div class="alert-success"></div>');
                        }, 3000);
                    }
                })
                .fail(function (data) {
                    //Server failed to respond - Show an error message
                    $('.msg').html('<div class="alert-danger">Could not reach server, please try again later.</div>');
                    setTimeout(function () {
                        $('.msg').html('<div class="alert-danger"></div>');
                    }, 3000);
                })
            e.preventDefault();
    });
});
Answer 1
var thisForm = this;
$.ajax({
  type: 'POST',
  url: 'mail.php',
  data: $(thisForm).serialize(),
  ...
  $(thisForm).find('.msg').html(... 
READ ALSO
Заход на сайт с сохраненным аккаунтом

Заход на сайт с сохраненным аккаунтом

Прочитал https://htmlwebru/php/example/avtorizacija2

477
Получить передаваемое имя параметра

Получить передаваемое имя параметра

хочу реализовать метод, проверяющий переданный параметр на nullВ случае, если параметр равен null, то кидаю исключение

220
Как получить доступ к MeshTextPro в unity 2d?

Как получить доступ к MeshTextPro в unity 2d?

в 2d игре на unity пишет такую ошибку при попытке подключения к TextMeshPro через c# код TextMeshPro в UI unity 2020

301