1

На странице есть две формы, одинаковых, пока с одинаковыми id:

<form action="/order/" method="post" id="orderform">
  <input type="text" name="name"  placeholder="ФИО">
  <input class="masked-phone" type="text" name="phone" placeholder="Номер      телефона">
  <input type="hidden" name="goods_id" value="10" />
  <input type="submit"  value="Заказать">
</form>

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

jQuery.extend({
    getQueryParameters : function(str) {
        return (str ||     document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}
});

function jsonifyForm(src) {
    var result = Object.create(null);
    var splitted_pairs = src.serialize().split('&');
    var kv;

    for (var i in splitted_pairs) {
        kv = splitted_pairs[i].split('=');
        result[kv[0]] = decodeURIComponent(kv[1]);
    }

    _.extend(result, $.getQueryParameters());

    return JSON.stringify(result);
}

$(document).ready(function() {
    $('#orderform').submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: e.currentTarget.action,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            data: jsonifyForm($(this))
        }).then(function() {
            $('#orderform')[0].reset();
            window.location.href = 'success.php';
        });
    });

    $('.masked-phone').inputmask('+7 (999) 999-99-99');
});

Пробовал заменить id на классы, срабатывают обе формы независимо от того какая задействовалась. Как переделать код обработчика чтобы он обрабатывал одну из форм, в зависимости от того какая использовалась?

7
  • что значит - "срабатывают обе формы" и "задействовалась"? Не используйте повторяющиеся id в html элементах и отформатируйте, пожалуйста, код.
    – user176262
    18 фев 2016 в 20:56
  • В смысле на сервер постбек приходит ответ с обеих форм, вторая соответственно выдает ошибку.С id понимаю что два одинаковых использовать нельзя, я не понимаю как их обработать одним обработчиком. Код отформатировал, спасибо. Не сразу понял как.
    – K.Miro
    18 фев 2016 в 21:10
  • Как инициируется/вызывается submit форм? В них есть кнопки для этого, или Вы это делаете в коде? А, вижу кнопку.
    – user176262
    18 фев 2016 в 21:15
  • Хм, непонятно, как нажатие кнопки type="submit" внутри одной формы может вызвать submit другой формы :( , или я чего-то не вижу?
    – user176262
    18 фев 2016 в 22:33
  • С одинаковым id как было раньше то еще понятно. Но вот сделал на каждой форме уникальный id, отдельный обработчик на каждую форму по id-шнику, как рекомендовали ниже,и все ровно на сервер приходит дублированный ответ. А это уже я никак не могу понять как так(
    – K.Miro
    18 фев 2016 в 22:40

1 ответ 1

4

Ну так в чем проблема то

<form action="/order/" method="post" id="orderform1">
    ...
</form>

и

<form action="/order/" method="post" id="orderform2">
    ...
</form>

обработка

$(document).ready(function() {
    $('#orderform1').submit(function(e) {
        ....
    });
    $('#orderform2').submit(function(e) {
        ....
    });
});
1
  • Последовал Вашему примеру, и все работает, спасибо за помощь! Тогда в конце рабочего дня моего соображения уже не хватало. А все оказалось просто и логично.
    – K.Miro
    10 мар 2016 в 10:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.