如何从bootstrap的下拉菜单发送值到php

时间:2015-01-06 15:31:43

标签: javascript php jquery html twitter-bootstrap

我创建了带有过滤器按钮的搜索栏,可以在教师和学生名称之间进行搜索。首先,我可以通过修复学生搜索到我的数据库,但是当我尝试使用过滤器按钮时,没有从下拉按钮发送任何值,所以这是我可怜的代码请来帮助我

HTML:

<form method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <div class="input-group">
        <div class="input-group-btn search-panel">
            <button name="filter" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenu1">
                <span class="selection pull-left">Select an option</span></button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="box-shadow:0px 6px 12px rgba(0, 0, 0, 0.176)">
                <li><a href="#Teacher" class="" data-value="Teacher"><span>Teacher</span></a></li>
                <li><a href="#Student" class="" data-value="Student"><span>Student</span></a></li>
                <li class="divider"></li>
                <li><a href="#all">All</a></li>
            </ul>
        </div>
        <!-- <input type="hidden" name="search_param" value="all" id="search_param">          -->
        <input name="txtSearch" type="text" class="form-control" id="txtSearch" placeholder="Search term..."
            value="<?php echo $wordSearch; ?>">
            <span class="input-group-btn">
            <button id="btnSearch" class="btn btn-primary" type="submit">
                <span class="glyphicon glyphicon-search"></span></button>
            </span>
    </div>
</form>

这是我的JS

<script type="text/javascript">
  $(".dropdown-menu").on('click', 'li a', function(){
    var selText = $(this).children("span").html();

   $(this).parent('li').siblings().removeClass('active');
      $('#vl').val($(this).attr('data-value'));
    $(this).parents('.input-group-btn').find('.selection').html(selText);
    $(this).parents('li').addClass("active");
  });

</script>

我不知道PHP PS。一切都在同一页下(请参见下图) http://upic.me/i/hg/ssssss.jpg

2 个答案:

答案 0 :(得分:1)

链接不是表单元素。您需要告诉表单字段(它将发送值 - 与链接相比)关于该值。 你实际上已经在这行中使用此行执行此操作:

$('#vl').val($(this).attr('data-value'));

现在您只需要在表单中创建相应的表单字段(属性id =&#34; vl&#34;)。 在这个例子中使用&#34;隐藏&#34;像这样的形式领域。 只需在标签之间添加:

<input type="hidden" id="vl" name="vl" value="">

然后你可以用PHP获得PHP的值:

$_POST['vl']

答案 1 :(得分:0)

如果您正在寻找将数据发布到后端以进行搜索,您需要ajax帖子来执行asyc(类似于jquery ajax方法)docs here

如果您想要使用表单,那么在开始使用php之前,您需要阅读html表单heres the MDN docs