从Bootstrap下拉菜单提交选择到$ _POST [英] Submit selection from Bootstrap dropdown menu to $_POST

问题描述

我的目标是将用户选择从引导下拉菜单提交到$ _POST。当我研究这个问题时，我遇到了这个问题（引导程序输入字段和下拉按钮提交）
我的问题与这个非常相似。然而，当我尝试了那个问题的答案时，推荐它不适合我，原因有几个。

 < div class =navbar navbar-inverse navbar-static-top> 
< div class =container> 
< a href =index.phpclass =navbar-brand>编程卡< / a> 
 
 <！ - 当窗口太小时用于导航的Creats按钮 - > 
< button class =navbar-toggledata-toggle =collapsedata-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>上传< / a>< / li> 
< li> 
< form action =index.phpmethod =POSTid =my_form> 
< input type =hiddenname =topicid =topic> 
 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>主题选择< b class =caret>< / b> 
< ul class =dropdown-menu> 
< li>介绍< / li> 
< li>方法< / li> 
< li>回圈< / li> 
< li>条件逻辑< / 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嵌套在表单元素中时，下拉菜单的格式会更改。我希望下拉列表是一个表单，但我希望它看起来像默认的引导程序下拉列表。

3. 不工作。即使点击了li，PHP也没有检测到$ _POST ['topic']的任何值。

目标摘要

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

您的语法错误 click（）代码。

  $（function（）
 {
 $（ '.dropdown-menu li'）。click（function（）
 {
 $（'＃my_topic'）。val（$（this）.html（））; 
 $（' #my_form'）。submit（）; 
}）; //<  - 在这里需要一个分号。
}）; //<  - 这里。 
  

以上除外：

$


1. 您的点击处理程序显然未被调用。脚本文件。
   

2. 请点2，然后移除外部 $（function（）...）而是使用
   
   

     $（document）.ready（function（）{
    $（'。dropdown-点击（函数（）
    {
    $（'＃my_topic'）。val（$（this）.html（））; 
    $（'＃my_form'） .submit（）; 
   }）; 
   }）; 
     

并且，勾选 demo 。

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.

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

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"

解决方案

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

      $(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();
                      });
    });
   

And, Check this demo .

这篇关于从Bootstrap下拉菜单提交选择到$ _POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！