forms - Better dropdown with bootstrap -

i try use dropdowns of bootstrap, it's work problem esthetic. :

http://twitter.github.io/bootstrap/javascript.html#dropdowns

i have code :

<div class="dropdown">      <a class="dropdown-toggle" data-toggle="dropdown" href="#">colléctivités <b class="caret"></b></a>      <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">      <?php          foreach ($collectivite $key => $value) {               echo '<form method="post" action="wbx.php"><li><button type="submit" class="btn" style="margin:0px;" name="cookie" value='.$value.'>'.$value.'</button>    </li></form>';          }        ?>    </ul> </div> 

without php :

<div class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#">colléctivités <b class="caret"></b></a>     <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">         <form method="post" action="wbx.php">             <li>                 <button type="submit" class="btn" style="margin:0px;" name="cookie" value=heeloworld.net>world.net</button>             </li>         </form>                         </ul> </div> 

but result basic... not good. use button because submit data form if want this, how can ?

edit solution

i use : alert ok, have value, submit doesn't work.

<?php     foreach ($collectivite $key => $value) {         $name = preg_replace('#[^0-9a-z]+#i', '', $value);         echo '<form method="post" action="wbx.php" id='.$name.'>             <input type="hidden"  name="cookie"   value='.$value.'>         </form>';     } ?> <div class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#">colléctivités <b     class="caret"></b></a>     <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">         <?php             foreach ($collectivite $key => $value) {                     $name = preg_replace('#[^0-9a-z]+#i', '', $value);                      echo '<li>                         <input type="hidden"  name="cookie"   value='.$value.'>                         <a class="myformlink" data-formname="#'.$name.'" >'.$value.'</a>                     </li>';             }          ?>     </ul> </div> <script type="text/javascript">         $(document).ready(function() {         $('.myformlink').click(function(){             $($(this).data('formname')).submit();         });     }); </script> 

you not have use button tu submit form. can use regular anchor it. please check link : i want anchor should act , input type submit button

this way dropdown 1 in example.

hope helps :)

edit : in french write "collectivités" ;) kiddin...

edit : sample of code data attributes

<div class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#">colléctivités <b     class="caret"></b></a>     <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">         <form method="post" action="wbx.php" id="formgujanmestras">             <li>                 <a class="myformlink" id="linkc" data-formname="#formgujanmestras">value1</a>             </li>         </form>         <form method="post" action="wbx.php" id="formlahume">             <li>                 <a class="myformlink" id="linkd" data-formname="#formlahume">value2</a>             </li>         </form>     </ul> </div> <script type="text/javascript">         $(document).ready(function() {         $('.myformlink').click(function(){             alert('hey martial gonna submit ' + $(this).data('formname'));             $($(this).data('formname')).submit();         });     }); </script>