douchuang4402
2013-12-25 08:36 浏览 115
已采纳

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

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"

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答 默认 最新

  • 已采纳
    doushenyu8228 doushenyu8228 2013-12-25 09:00

    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 .

    点赞 评论 复制链接分享
  • doukun0888 doukun0888 2013-12-25 08:45

    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

    <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>
    
    点赞 评论 复制链接分享

相关推荐