Question

首先，我来自乌拉圭，对我的英语感到抱歉，

我有这个表格

<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>

问题是永远不会取得成功。代码只是示例

Answer 1

更改任何选项或复选框时，没有提交表单的内容？

为复选框添加事件处理程序，并选择触发提交

$(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');
    })
});

Answer 2

对不起我的英语我来自乌拉圭。

首先，我必须说你必须在任何选择或复选框上附加事件监听器，为此我建议你将所有内容包装在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;
    })

jquery：提交表单序列化

2 个答案: