Better dropdown with bootstrap - forms

Question

I try to use dropdowns of bootstrap, it's work the problem is esthetic. :
http://twitter.github.io/bootstrap/javascript.html#dropdowns
I have this 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 as $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 the result is very basic... not really good. I use button because i submit some data with form
So if i want something like this, how can i do ?
EDIT solution
I Use this : the alert is ok, i have the good value, but the submit doesn't work.
<?php
foreach ($collectivite as $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 as $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>

Answer 1

You do not have to use a button tu submit your form. You can use a regular anchor to do it. please check this link : i want a anchor should act like and input type submit button
this way your dropdown will look like the one in your example.
Hope it helps :)
Edit : In French we write "Collectivités" ;) just kiddin...
EDIT : sample of a code with 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 i gonna submit ' + $(this).data('formname'));
$($(this).data('formname')).submit();
});
});
</script>