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

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>

不工作的代码方面

1. 当 li 嵌套在表单元素内时，下拉菜单的格式会发生变化。我希望下拉菜单是一个表单，但我希望它看起来像默认的引导下拉菜单。

2. 将 onclick 事件处理程序附加到 li 元素根本不起作用。即使点击了 li，PHP 也没有检测到 $_POST['topic']

的任何值

目标摘要

我想要默认的引导程序下拉菜单。我希望用户能够单击下拉菜单中的任何项目。单击后，选择应添加到索引“主题”处的 $_POST 数组中

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.

上述以外：

1. 您的点击处理程序显然没有被调用。

2. 您正在使用 jquery API，而没有先链接到 jquery 脚本文件。

3. 执行第 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>

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

<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>