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

Submit selection from Bootstrap dropdown menu to $_POST

提问by user3108671

My goal is to submit the users selection from a bootstrap dropdown menu to $_POST. As I was researching this question I came across this (bootstrap input field and dropdown button submit) My question is very similar to this one. However, when I tried what the answer to that question recommended it did not work for me for several reasons.

我的目标是将用户选择从引导下拉菜单提交到 $_POST。当我研究这个问题时，我遇到了这个（引导输入字段和下拉按钮提交）我的问题与这个问题非常相似。但是，当我尝试该问题的答案时，由于多种原因，它对我不起作用。

My Code

我的代码

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

Aspects of code that are not working

不工作的代码方面

1. When the li is nested inside of the form element the formatting of the dropdown menu changes. I would like the dropdown to be a form but I want it to look like the default bootstrap dropdown.

2. Attaching an onclick event handler to the li elements simply is not working. Even after the li is clicked, the PHP does not detect any value for $_POST['topic']

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

2. 将 onclick 事件处理程序附加到 li 元素根本行不通。即使在点击 li 之后，PHP 也没有检测到 $_POST['topic'] 的任何值

Summary of Goal

目标概要

I would like the default looking bootstrap drop down menu. I would like the user to be able to click on any item in the drop down menu. After the click the selection should be added to the $_POST array at index "topic"

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

回答by sanjeev mk

There is a syntax error in your click()code. You missed 2 semi-colons at the end.

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

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

Other than the above:

除上述以外：

1. Your click handler is clearly not being called.

2. You're using the jquery API, without first linking to the jquery script file.

3. Do point 2, then remove the outer $(function()...)and instead, use

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

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

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

3. 做第 2 点，然后移除外部$(function()...)，而是使用

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

And, Check this demo.

并且，检查这个演示。

回答by Dmitriy.Net

Try this

试试这个

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

if you want to send all navbar, remove hidden field named topic and use next 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>