Submit selection from Bootstrap dropdown menu to $_POST

Question

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"

Answer 1

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 .

Answer 2

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>