使用提交按钮将清单自动提交代码转换为清单 [英] Convert checklist auto submit code to checklist with submit button

问题描述

这是我现在正在使用的清单单选按钮代码，我想将其转换为带有提交按钮的清单.当前，选择一个选项将立即过滤结果，但是我想选择多个选项并单击提交按钮以获取结果.我想在不影响现有功能的情况下使用它作为附加功能. 简而言之，它应该允许一次选择多个选项并提交. 有人给我一个关于如何执行此操作的示例吗? 我正在尝试学习JQuery和javascript，并且需要别人的帮助. 我曾尝试过，但没有得到有效的结果.

Here is the checklist radio button code I am using right now, I would like to convert it into a checklist with submit button. Currently, selecting one option will filter the result instantly, but i want to select multiple options and click submit button to get result. I want to use it without effecting the existing functions, as an addon feature. In short it should allow to select more than one option at a time and submit. Someone give me an example on how to do this ? I am trying to learn JQuery and javascript, and need someone's help. I tried but couldn't get a working result.

附有示例图片

<h3>Sort</h3>
<div class="list-group-item checkbox">
<label for="radio1">
<input type="radio" id="radio" class="common_selector brand" name="radio" value="Samsung"> Samsung
</label>
<label>
<input type="radio" class="common_selector brand" name="radio" value="Apple" > Apple
</label>
<label>
<input type="radio" class="common_selector brand" name="radio" value="Nokia" > Nokia
</label>
<label>
</div>

以下JQuery函数正在从此清单中捕获数据

The following JQuery function is capturing data from this checklist

<script>
$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        $('.filter_data').html('<div id="loading" style="" ></div>');
        var action = 'fetch_data';
        var minimum_price = $('#hidden_minimum_price').val();
        var maximum_price = $('#hidden_maximum_price').val();
        var brand = get_filter('brand');
        var sort = get_filter('sort');
        $.ajax({
            url:"fetch_data.php",
            method:"POST",
            data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, sort:sort},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }

    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }

    $('.common_selector').click(function(){
        filter_data();
    });

    $('#price_range').slider({
        range:true,
        min:1000,
        max:95000,
        values:[1000, 95000],
        step:500,
        stop:function(event, ui)
        {
            $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
            $('#hidden_minimum_price').val(ui.values[0]);
            $('#hidden_maximum_price').val(ui.values[1]);
            filter_data();
        }
    });

});
</script>

推荐答案

在html中，将单选按钮转换为复选框.然后创建应用"按钮.在脚本中，将应用"按钮的click事件连接到filter_data函数.

In the html, convert the radiobuttons to checkboxes. Then create the Apply button. In the script, connect the click event of the Apply button to the filter_data function.

这篇关于使用提交按钮将清单自动提交代码转换为清单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！