@Counter

Много форм и один обработчик как построить?

На странице есть несколько форм стандартного вида:
<form role="form">
    <input type="text" class="form-control" id="name">
    <input type="text" class="form-control" id="phone">
    <select id="selmain" >
    <option value="387565">1</option>
    <option value="390464">2</option>
    <option value="390465">3</option>
    </select>
    <button type="submit" class="btn btn-default" id="sloading">Отправить</button>
</form>


$('#sloading').on('click', function () {
   var name = $("#name").val();
   var phone = $("#phone").val();
   var delivery = $("select#selmain").val();

/// тут еще идет валидация введенных данных

    $.ajax({
            url: '',
            type: '',
/// и т.д.

Все формы обрабатываются по id, т.к. id должны быть уникальными они во всех формах разные. Следовательно для каждой формы нужно строить свой обработчик для отправки имени и телефона джейсаном на сервер.

Вопрос заключается в следующем, как сделать обработчик таким образом что бы отслуживался клик кнопки по классу и данные name и phone забирались именно с той формы у которой была нажата эта кнопка?
  • Вопрос задан
  • 702 просмотра
Решения вопроса 1
@curator
<form action="send_path" method="POST">
    <input type="text" name="name" value="">
    <input type="text" name="phone" value="">
    ...
    <button type="sumbit">Send</button>
</form>


$('form').on('click', 'button[type="submit"]', function (e) {
    var form = $(e.currentTarget).closest('form'),
        name = form.find('input[name="name"]').val();
     ...
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
       ...
    });
});


Подробнее .on()
Подробнее .closest()
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
15 мая 2021, в 10:39
20000 руб./за проект
15 мая 2021, в 10:37
1000 руб./за проект