Question

我的目标是将用户选择从引导下拉菜单提交到$ _POST。当我研究这个问题时，我遇到了这个问题（bootstrap input field and dropdown button submit）我的问题与此非常相似。但是，当我尝试这个问题的答案时，由于几个原因，它对我不起作用。

我的代码

    <div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <a href="index.php" class = "navbar-brand">Programming Cards</a>

        <!--Creats button for navigation when window gets too small-->
        <button class = "navbar-toggle" data-toggle = "collapse" data-target= ".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="upload.php">Upload</a></li>
                <li>
                    <form action="index.php" method="POST" id="my_form">
                        <input type="hidden" name="topic" id="topic">

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Topic Select<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li>Introduction</li>
                                    <li>Methods</li>
                                    <li>Loops</li>
                                    <li>Conditional Logic</li>
                                </ul>
                            </a>
                        </li>
                    </form>

                    <script>
                    $(function() 
                    {
                        $('.dropdown-menu li').click(function()
                        {
                            $('#my_topic').val($(this).html());
                            $('#my_form').submit();
                        });
                    });
                    </script>
                </li>
            </ul>
        </div>
    </div>
</div>

无效的代码方面

当li嵌套在表单元素内时，下拉菜单的格式会发生变化。我希望下拉列表是一个表单，但我希望它看起来像默认的bootstrap下拉列表。
将onclick事件处理程序附加到li元素根本不起作用。即使在点击li之后，PHP也没有检测到$ _POST ['topic']的任何值

目标摘要

我想要默认的bootstrap下拉菜单。我希望用户能够点击下拉菜单中的任何项目。单击后，选择应添加到索引“topic”

Answer 1

click()代码中存在语法错误。你最后错过了2个半冒号。

      $(function() 
                {
                    $('.dropdown-menu li').click(function()
                    {
                        $('#my_topic').val($(this).html());
                        $('#my_form').submit();
                    }); // <-- need a semi-colon here.
                }); // <-- and here.

除上述之外：

您的点击处理程序显然未被调用。
您正在使用jquery API，而不首先链接到jquery脚本文件。

执行第2点，然后删除外部$(function()...)，然后使用

 $(document).ready(function(){ 
              $('.dropdown-menu li').click(function()
                   {
                       $('#my_topic').val($(this).html());
                       $('#my_form').submit();
                   });
 });

并且，请检查此demo。

Answer 2

试试这个

<form action="index.php" method="POST" id="my_form">
<input type="hidden" name="topic" id="topic">

    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Topic Select<b class="caret"></b>
            <ul class="dropdown-menu">
                <li>Introduction</li>
                <li>Methods</li>
                <li>Loops</li>
                <li></li>
            </ul>
        </a>
    </li>
</form>

<script>
$(function() 
{
    $('.dropdown-menu li').click(function()
    {
        $('#my_topic').val($(this).html());
        $('#my_form').submit();
    });
});
</script>

如果要发送所有导航栏，请删除名为topic的隐藏字段并使用下一个脚本

<script>
$(function() 
{
    $('.dropdown-menu li').click(function()
    {
        $('.dropdown-menu li').each(function()
        {
            $('#my_form').append('<input type="hidden" name="topic[]" value="'+$(this).html()+'">');
        });

        $('#my_form').submit();
    });
});
</script>

从Bootstrap下拉菜单中将选择提交到$ _POST

2 个答案: