Twitter Bootstrap: using submit form as drop down menu items? - css

Question

Instead of using anchors or buttons in a drop down menu, I want to have a form for each item. The form contains some hidden fields and a submit button. When I put the form in each <li> of my mark up, the UI was messed up. Does Bootstrap support this natively? If not, I'm going to re-code my application to work with links.
Update 1: screen shot
Update 2: mark up
<div class="btn-group open">
<button class="btn">Action</button>
<ul class="dropdown-menu">
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Favorite"/>
</fieldset>
</form>
</li>
<li>Message</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Smile"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Block"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Friend"/>
</fieldset>
</form>
</li>
<li>
<form action="#" method="post">
<fieldset>
<input type="submit" value="Exclude From Future Search Results"/>
</fieldset>
</form>
</li>
</ul>
</div>
Update 3: icons
I want the submit buttons to have an icon. Not sure what's the best way to do that, but this is my solution:
<label for="foo">
<i class="icon-ok></i> Favorite
</label>
<input id="foo" style="display:none;" type="submit" value="Favorite"/>
The submit form is hidden, the label is shown with icon, and when user clicks on the label, it works. No JS required.

Answer 1

Not quite sure if I understand what you mean about the submit form being hidden but the label showing an icon however I was able to override the buttons with an image. Please see the attached jsBin. I did it by adding a class to the input's
http://jsbin.com/eboqij/1/edit
.button{
background-image:url('http://www.nyanicorn.com/res/img/icon_nyan.png');
background-repeat:no-repeat;
text-indent:-9999px;
width:40px!important;
}

Answer 2

Or just use Javascript to store the value in a hidden field and submit the form -- you're probably using JS anyways handle the open/close of the dropdown.
I had the exact same problem and I've created this new "submit" plug-in:
!function ($) {
"use strict"; // jshint ;_;
$(document).on('click.submit.data-api', '[data-submit]', function (e) {
e.preventDefault()
var form= $('#'+$(this).data('submit'))
form.find('input[name="'+$(this).data('name')+'"]').val($(this).data('value'))
form.submit()
})
}(window.jQuery);
Which I can use thus:
<form id="myform" ...>
<input type="hidden" name="myparam">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a data-submit="myform" data-name="myfield" data-value="myvalue>
Click here
</a>
</li>
</ul>
</div>
</form>