title: Submit selection from Bootstrap dropdown menu to $_POST
body: <p>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 (<a href="https://stackoverflow.com/questions/15649001/bootstrap-input-field-and-dropdown-button-submit">bootstrap input field and dropdown button submit</a>)
  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. </p>
  
  <p><strong>My Code</strong></p>
  
  <pre><code>    &lt;div class="navbar navbar-inverse navbar-static-top"&gt;
      &lt;div class="container"&gt;
          &lt;a href="index.php" class = "navbar-brand"&gt;Programming Cards&lt;/a&gt;
  
          &lt;!--Creats button for navigation when window gets too small--&gt;
          &lt;button class = "navbar-toggle" data-toggle = "collapse" data-target= ".navHeaderCollapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="upload.php"&gt;Upload&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;form action="index.php" method="POST" id="my_form"&gt;
                          &lt;input type="hidden" name="topic" id="topic"&gt;
  
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Topic Select&lt;b class="caret"&gt;&lt;/b&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;Introduction&lt;/li&gt;
                                      &lt;li&gt;Methods&lt;/li&gt;
                                      &lt;li&gt;Loops&lt;/li&gt;
                                      &lt;li&gt;Conditional Logic&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/form&gt;
  
                      &lt;script&gt;
                      $(function() 
                      {
                          $('.dropdown-menu li').click(function()
                          {
                              $('#my_topic').val($(this).html());
                              $('#my_form').submit();
                          });
                      });
                      &lt;/script&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Aspects of code that are not working</strong></p>
  
  <ol>
  <li><p>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.</p></li>
  <li><p>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']</p></li>
  </ol>
  
  <p><strong>Summary of Goal</strong></p>
  
  <p>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"</p>