Javascript 点击链接提交过滤表单_Javascript_Jquery_Html_Css_Forms

Javascript 点击链接提交过滤表单

javascript jquery html css forms

Javascript 点击链接提交过滤表单,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,我试着做一些像这样的事情：这是我的代码：我试图使其可降解，这样在没有javascript的情况下，他们可以提交表单来调整结果，但使用javascript，他们只需单击所需结果的文本即可问题A 我怎样才能做到这一点呢？他们只需点击文本，启用javascript，它不仅可以选择单选按钮，还可以提交表单问题B 我的代码是实现这一期望结果的正确方法吗？将单选按钮替换为提交按钮 <input type="submit" name="status" value="Status 1">

我试着做一些像这样的事情：

这是我的代码：

我试图使其可降解，这样在没有javascript的情况下，他们可以提交表单来调整结果，但使用javascript，他们只需单击所需结果的文本即可

问题A

我怎样才能做到这一点呢？他们只需点击文本，启用javascript，它不仅可以选择单选按钮，还可以提交表单

问题B

我的代码是实现这一期望结果的正确方法吗？

将单选按钮替换为提交按钮

<input type="submit" name="status" value="Status 1">

将单选按钮替换为提交按钮

<input type="submit" name="status" value="Status 1">

我已经更新了您的提交按钮，如果启用了javascript，这些按钮将被隐藏

<div>
    <form action="/echo/html/">
        <ul id="filter">
            <li> <a href="#" class="dropdown">Any status ▾</a>
                <ul class="opt">
                    <li>
                        <label>
                            <input type="radio" name="status" />Status 1</label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="status" />Status 2</label>
                    </li>
                    <li>
                        <input type="submit" value="submit"/>
                    </li>
                </ul>
            </li>
            <li> <a href="#" class="dropdown">Any date ▾</a>

                <ul class="opt">
                    <li>
                        <label>
                            <input type="radio" name="date" />Date 1</label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="date" />Date 2</label>
                    </li>
                    <li>
                        <input type="submit" value="submit"/>
                    </li>
                </ul>
            </li>
        </ul>
    </form>
</div>
<div id="results">
    Filtered results go here
</div>
<script>
    $("ul.opt").addClass("hidden");
    $('#filter > li > a').on("click", function (e) {
        var cache = $(this).next('ul');
        $('#filter ul:visible').not(cache).hide();
        cache.toggle();
        $('#filter li input[type=submit]').hide();
    });
    $('#filter input[type=radio]').click(function() {
        var $form = $(this).closest('form');
        $('#results').html('filtering...');
        $.post($form.attr('action'),$form.serialize(),function(response) {
            if ( response ) {
               $('#results').html(response);
            } else {
               $('#results').html('no results found');
            }
        });
    });
</script>






状态1


状态2








日期1


日期2






过滤结果显示在这里
$（“ul.opt”）.addClass（“隐藏”）；
$（'#filter>li>a'）。打开（“单击”，函数（e）{
var cache=$（this.next（'ul'）；
$（'#filter ul:visible'）.not（cache.hide（）；
toggle（）；
$（“#筛选li输入[type=submit]”）。隐藏（）；
});
$（“#筛选输入[type=radio]”）。单击（函数（）{
var$form=$（this）.closest（'form'）；
$（'#results'）.html（'筛选…'）；
$.post（$form.attr（'action'），$form.serialize（），函数（响应）{
如果（答复）{
$（'#results'）.html（回复）；
}否则{
$（'#results'）.html（'未找到结果'）；
}
});
});

我已经更新了您的提交按钮，如果启用了javascript，这些按钮将被隐藏

<div>
    <form action="/echo/html/">
        <ul id="filter">
            <li> <a href="#" class="dropdown">Any status ▾</a>
                <ul class="opt">
                    <li>
                        <label>
                            <input type="radio" name="status" />Status 1</label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="status" />Status 2</label>
                    </li>
                    <li>
                        <input type="submit" value="submit"/>
                    </li>
                </ul>
            </li>
            <li> <a href="#" class="dropdown">Any date ▾</a>

                <ul class="opt">
                    <li>
                        <label>
                            <input type="radio" name="date" />Date 1</label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="date" />Date 2</label>
                    </li>
                    <li>
                        <input type="submit" value="submit"/>
                    </li>
                </ul>
            </li>
        </ul>
    </form>
</div>
<div id="results">
    Filtered results go here
</div>
<script>
    $("ul.opt").addClass("hidden");
    $('#filter > li > a').on("click", function (e) {
        var cache = $(this).next('ul');
        $('#filter ul:visible').not(cache).hide();
        cache.toggle();
        $('#filter li input[type=submit]').hide();
    });
    $('#filter input[type=radio]').click(function() {
        var $form = $(this).closest('form');
        $('#results').html('filtering...');
        $.post($form.attr('action'),$form.serialize(),function(response) {
            if ( response ) {
               $('#results').html(response);
            } else {
               $('#results').html('no results found');
            }
        });
    });
</script>






状态1


状态2








日期1


日期2






过滤结果显示在这里
$（“ul.opt”）.addClass（“隐藏”）；
$（'#filter>li>a'）。打开（“单击”，函数（e）{
var cache=$（this.next（'ul'）；
$（'#filter ul:visible'）.not（cache.hide（）；
toggle（）；
$（“#筛选li输入[type=submit]”）。隐藏（）；
});
$（“#筛选输入[type=radio]”）。单击（函数（）{
var$form=$（this）.closest（'form'）；
$（'#results'）.html（'筛选…'）；
$.post（$form.attr（'action'），$form.serialize（），函数（响应）{
如果（答复）{
$（'#results'）.html（回复）；
}否则{
$（'#results'）.html（'未找到结果'）；
}
});
});
我认为谷歌使用
HTML，在
中更改
：
在
上单击JS，通过AJAX使用类似sortDate=status1
的参数执行search.action
（或其他搜索服务），对结果进行排序
对于多个排序，您可以选择排序参数status=status1&date=date1

我不知道是否有任何方法可以在不使用javascript（也不重新加载所有页面）的情况下执行提交。
我认为谷歌使用的是
HTML，在
中更改
：
在
上单击JS，通过AJAX使用类似sortDate=status1
的参数执行search.action
（或其他搜索服务），对结果进行排序
对于多个排序，您可以选择排序参数status=status1&date=date1

我不知道是否有任何方法可以在不使用javascript（也不重新加载所有页面）的情况下执行提交操作。
真的吗？我从来没想过。我真的不明白这是如何处理表单的，我需要为每个筛选器（日期、状态等）使用一个表单还是一个包含所有筛选器的表单，或者根本不使用表单？这主要取决于您如何实现后端。每个筛选器有一个表单（并通过每个筛选器中的隐藏输入跟踪以前设置的值）可能是最简单的。除了没有
，看起来还可以。@Jimmy-请参阅我第一条评论的第二句：“并通过每个筛选器中的隐藏输入跟踪以前设置的值”否。每组选项都有一个表单。然后将当前从其他表单中选择的选项作为隐藏输入放入。e、 g.等哦，真的吗？我从来没想过。我真的不明白这是如何处理表单的，我需要为每个筛选器（日期、状态等）使用一个表单还是一个包含所有筛选器的表单，或者根本不使用表单？这主要取决于您如何实现后端。每个过滤器（和tracki）有一个表单
$('ul.opt a').click(function(e){
    e.preventDefault();
    $(this).parents(".opt").find("a").removeClass("active");
    $(this).addClass("active");

    $.get($(this).attr("href"),function(res){
        //do something with response
    });
});