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

Question

[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 забирались именно с той формы у которой была нажата эта кнопка?

Answer 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()