基于复选框和下拉列表生成AJAX查询的URL

时间:2015-08-17 22:42:42

标签: javascript jquery html ajax

我有一个看起来像这样的选项面板:

enter image description here

附上我的HTML代码:

HTML

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Times You Don't Want Classes</h3>
    </div>
    <div class="panel-body panel-options">
        <div id="days" class="checkbox">
            <label>
                <input type="checkbox"> Mon
            </label>
            <label>
                <input type="checkbox"> Tues
            </label>
            <label>
                <input type="checkbox"> Wed
            </label>
            <label>
                <input type="checkbox"> Thurs
            </label>
            <label>
                <input type="checkbox"> Fri
            </label>
        </div>
        <div class="btn-group">

            <a id="from-text" class="btn btn-default">10:00 AM</a>
            <a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
            <ul id="from" class="dropdown-menu time-span">
                // These are simply time increments from 7 AM to midnight
                @foreach ($timeIncrements as $increment)
                    <li><a href="#">{{ $increment }}</a></li>
                @endforeach
            </ul>
        </div>
        to
        <div class="btn-group">
            <a id="to-text" class="btn btn-default">12:00 PM</a>
            <a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
            <ul id="to" class="dropdown-menu time-span">
                @foreach ($timeIncrements as $increment)
                    <li><a href="#">{{ $increment }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

我想要做的是,当用户点击星期一...星期二...星期三..和从 - 到 - 时间时,为我的AJAX代码生成一个URL来查询该特定URL。

我的API看起来像以下网址:

example.org/schedulizer/schedule?from=1000&to=1200&days=MW

如您所见,fromto是用户不想要课程的跨度(在我们的情况下是上午10点到下午12点)

days是他们希望跨度满足的日子(在我们的例子中是星期一和星期三)

这是我到目前为止我的JS

JS:

<script type="text/javascript">
    $(function()
    {
        $('#from li').on('click', function(){
            $('#from-text').text($(this).text());
        });

        $('#to li').on('click', function(){
            $('#to-text').text($(this).text());
        });

        $(function(){
            $("input[type='checkbox']").change(function(){
                var item=$(this);
                if(item.is(":checked"))
                {
                    console.log($('#days').attr('value'));
                }
            });
        });
    });
</script>

我对Javascript很新,所以我很失落如何开始。如何从复选框和下拉列表中获取值并根据所选内容生成URL?

0 个答案:

没有答案