JQuery: отправить форму сериализации

0

Привет, в первую очередь, я из uruguay, так извините за мой английский,

У меня есть эта форма

<form id="filtros" name="filtros" method="post">
                    <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-0 col-md-6 tipe-prod">
                        <select name="select-prod" id="select-prod">
                            <option value="" onChange="$(this).closest('form').submit()">Seleccionar producto</option>
                            <option value="">Producto 2</option>
                            <option value="">Producto 3</option>
                            <option value="">Producto 4</option>
                            <option value="">Producto 5</option>
                        </select>
                        <select name="order-prod" id="select-ord" onChange="$(this).closest('form').submit()">
                            <option value="">Ordenar por</option>
                            <option value="">Orden 1</option>
                            <option value="">Orden 2</option>
                        </select>
                    </div>
                    <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-0 col-md-6 tipe-prod">
                        <ul>
                            <li>
                                <div class="icon-tipe-cont sin-sal">
                                    <div class="icon-cont-top">
                                        <div class="icono grey"></div>
                                    </div>
                                    <label for="sin-sal">Sin sal añadida</label>
                                    <input id="sin-sal" class="css-checkbox" type="checkbox" onChange="$(this).closest('form').submit()" />
                                    <label for="sin-sal" class="css-label"></label>
                                </div>
                            </li><!--
                            --><li>
                                <div class="icon-tipe-cont vegetal">
                                    <div class="icon-cont-top">
                                        <div class="icono green"></div>
                                    </div>
                                    <label for="vegetal">Vegetarianos</label>
                                    <input id="vegetal" class="css-checkbox" type="checkbox" onChange="$(this).closest('form').submit()" />
                                    <label for="vegetal" class="css-label"></label>
                                </div>
                            </li><!--
                            --><li>
                                <div class="icon-tipe-cont bajas-cal">
                                    <div class="icon-cont-top">
                                        <div class="icono brown"></div>
                                    </div>
                                    <label for="bajas-cal">Bajas calorias</label>
                                    <input id="bajas-cal" class="css-checkbox" type="checkbox" onChange="$(this).closest('form').submit()" />
                                    <label for="bajas-cal" class="css-label"></label>
                                </div>
                            </li><!--
                            --><li>
                                <div class="icon-tipe-cont sin-azucar">
                                    <div class="icon-cont-top">
                                        <div class="icono orange"></div>
                                    </div>
                                    <label for="sin-azucar">Sin azúcar</label>
                                    <input id="sin-azucar" class="css-checkbox" type="checkbox" onChange="$(this).closest('form').submit()" />
                                    <label for="sin-azucar" class="css-label"></label>
                                </div>
                            </li><!--
                            --><li>
                                <div class="icon-tipe-cont all">
                                    <div class="icon-cont-top"></div>
                                    <label for="todos">Todos</label>
                                    <input id="todos" class="css-checkbox" type="checkbox" />
                                    <label for="todos" class="css-label"></label>
                                </div>
                            </li>
                        </ul>
                    </div>
                    </form>

Идея состоит в том, что эта форма представляется путем изменения любого из выбранных или флажков, а затем обрабатывается этим скриптом jquery:

<script>   
    $(function(){
     $("#filtros").submit(function(){
     var url = "process.php"; //Funciones para procesar el formulario
     var cargando = document.getElementById("cargando");
     var content  = document.getElementById("contenido_productos");
         content.style.display='none';
         cargando.style.display='block';
        $.ajax({
               type: "POST",
               url: url,
               data: $("#filtros").serialize(), //ID del formulario
               success: function(data)
               {
                    cargando.style.display='none';
                    $("#contenido_productos").load(url);
               }
             });

        return false; // Evitar ejecutar el submit del formulario.
     });
    });
    </script>

Проблема в том, что никогда не достигают успеха. Код просто и пример

  • 0
    Попробуйте .submit(function(e){ /*...*/ e.preventDefault();return false;}); // Избегаем выполнения отправки формы.
Теги:

2 ответа

0

Нет ничего, чтобы отправить форму при изменении каких-либо выборок или флажков?

Добавьте обработчик событий для флажков и выберите, что запускает отправку

$(function () {
    $("#filtros").submit(function () {
        var url      = "process.php";
        var cargando = $("#cargando").hide();
        var content  = $("#contenido_productos").show();

        $.ajax({
            type   : "POST",
            url    : url,
            data   : $("#filtros").serialize(), //ID del formulario
            success: function (data) {
                cargando.hide();
                content.html(data);
            }
        });

        return false;
    }).find('select, input[type="checkbox"]').on('change', function() {
        $("#filtros").trigger('submit');
    })
});
Поделиться
  • 0
    Чтобы отправить форму, я использую ее в каждом поле выбора и флажка: onChange = "$ (this) .closest ('form'). Submit ()"
  • 1
    Не заметил ужасного встроенного jQuery, удалите его!
Показать ещё 6 комментариев
0

Извините, мой английский Я тоже из Уругвая.

Прежде всего, я должен сказать, что вы должны прикрепить прослушиватель событий к изменениям на любом флажке или флажке, поэтому я рекомендую вам обернуть все это внутри div, скажем,

Затем присоедините слушателя к этому:

$('div#contenedor select, input[type="checkbox"]').on('change', function() {
        $("#filtros").trigger('submit');
})

Также используйте #cargando для извлечения по id и не используйте document.getElementById()

 $("#filtros").submit(function () {
        var url      = "process.php";
        var cargando = $("#cargando").hide();
        var content  = $("#contenido_productos").show();

        $.ajax({
            type   : "POST",
            url    : url,
            data   : $("#filtros").serialize(), //ID del formulario
            success: function (data) {
                cargando.hide();
                content.load(url);
            }
        });

        return false;
    })
Поделиться
  • 0
    Спасибо за совет, я добавляю это, но все еще падает до события успеха
  • 0
    Вы пытались определить error: function (), чтобы увидеть, что происходит? Также вы можете попробовать сделать console.log (data) в первой строке вашей функции успеха, чтобы получить дамп того, что он получил.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню