passshift
@passshift
php, js, html5, css

Как отправить по отдельности несколько одинаковых форм с разными ID?

Здравствуйте!

Имеется список форм из 10 штук:

<form id="sender">
    <input type="hidden" id="article" value="ID товара">
    <input type="text" id="quantuty" value="количество штук">
    <input type="button" id="send_to_cart">
</form>
...


Мне нужно передать ID товара и количество штук Ajax-обработчику.

Проблемы начались когда вместо button был submit, тогда я пытался брать данные формы с помощью .serialize, но ничего не получалось скорее всего виноват Chrome, он не давал запретить отправку данных на сервер и страница перезагружалась.

Было решено заменить submit на button, но теперь я не знаю как забрать данные формы и отдать Ajax'у.

Подскажите, как это правильно сделать, до этого не приходилось писать на jquery и яве, но без этого никак в сложившейся ситуации.

Добавлю: jQuery Form Plugin не помогает, структура такая:

Вот хэд:

<script src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/media/js/jquery.form.min.js"></script>


Вот форма:

<form id="form" action="/cart/add" method="post"> 
            <input type="hidden" id="article_id" value="15>" /> 
            <input type="submit" value="В корзину" /> 
        </form>


Вот так пытаюсь обработать:

$(document).ready(function() {
    $('#form').submit(function(e) {
        e.preventDefault();
        $(this).ajaxSubmit(options);
        return false;
    });
});


При нажатии на submit страница обновляется (т.е. срабатывает post и уходит запрос к серверу, что недопустимо)
  • Вопрос задан
  • 4376 просмотров
Решения вопроса 1
Не надо использовать велосипедов. Да и плагин совершенно не нужен. Как советуют на stackoverflow
return false;
- это то, что Вам нужно. Я отписался в комментарии под вопросом - код абсолютно рабочий, страница не перезагружается.
Убедитесь, что обработчик вызывается и по возможности используйте последнюю версию jq.

Как уже Вам советовали используйте атрибут name для полей, в целом код может выглядеть вот так:
<form id="form" action="/cart/add" method="post"> 
    <input type="hidden" value="15>" name="articleId" /> 
    <button type="submit">В корзину</button> 
</form>

В форме я заменил input[type=submit] на button[type=submit] -- это более общепринято :) И добавил атрибут name = articleId

$(function(){
    $('#form').submit(function(e) {        
        var $this = $(this);
        var data = {};
        $this.find('input').each(function(){
            var $el = $(this);
            var key = $el.attr('name');            
            if(key)
                data[key] = $el.val();
        });
        $.post($this.attr('action'),data)
         .done(function(r){
             console.log('good call back');
         })
         .fail(function(r){
            console.log('bad call back');
         });
        e.preventDefault();
        return false;
    });
});

Тут реализована автоматическая сборка полей формы в переменную data: данные группируются по data[input.name] = val. Адрес post-запроса из атрибута 'action' формы .Пример - jsfidle

Если хотите реализовать в виде плагина - можно сделать нечто подобное:
jQuery.fn.extend({
    myFormSubmit: function(o){
        var opts = {
            doneCb: function() {},
            failCb: function() {}
        };
        opts = $.extend(opts,o);
        return this.each(function(){
            $(this).submit(function(e) {        
                var $this = $(this);
                var data = {};
                $this.find('input').each(function(){
                    var $el = $(this);
                    var key = $el.attr('name');            
                    if(key)
                        data[key] = $el.val();
                });
                $.post($this.attr('action'),data)
                 .done(opts.doneCb)
                 .fail(opts.failCb);
                e.preventDefault();
                return false;
            });
        });
    }
});

$(function(){
    $('#form').myFormSubmit({
        doneCb: function(r){
            console.log('good call back');
        },
        failCb: function(r){
            console.log('bad call back');
        }
    });
});

jQuery.fn.extend - добавляет новый метод в jq. Пример - jsfiddle

PS я использовал свежую версию jQuery.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
passshift
@passshift Автор вопроса
php, js, html5, css
Кстати chrome тут не при чем... IE тоже отравляет форму (
Ответ написан
Комментировать
swanrnd
@swanrnd
Издатель HTML5 игр
Уберите тег form
Поставьте onclick на кнопку.

<div id="sender">
    <input type="hidden" id="article" value="ID товара">
    <input type="text" id="quantuty" value="количество штук">
    <input type="button" onclick="SendForm();">
</div>

function SendForm() {
  $.post('url/', {article: $("#article").val(), quantuty: $("#quantuty").val(),   }, function (data) { 
    alert('Отправлено');
  });
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы