Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to group buttons in different forms tags in Bootstrap

How do you group buttons within different form tags together in Twitter's Bootstrap?

Right now what I get is:

<div class="btn-group"> 
    <!--More button-->
    <form action="search.php" method="POST">
    <input type="hidden" name="some name" value="same value">
    <button style="float:left" class="btn" type="submit"><i class="icon-search"></i> More</button>
    </form>
    <!--Edit button-->
    <form action="edit_product.php" method="post">
    <button class="btn btn-primary" type="submit"  name="product_number" value="some value"><i class="icon-cog icon-white"></i> Edit</button>
     </form>
     <!--delete button-->
     <button data-toggle="modal" href="#error_delete" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</button>
</div>
like image 435
Mastergalen Avatar asked Jul 11 '12 08:07

Mastergalen


2 Answers

If you'd rather not use scripting you can use hidden inputs (or any inline element, such as <i></i>) to create the proper first:child and last:child relationships:

Fiddle demo

<form class="btn-group">
    <button class="btn">Button One</button>
    <input type="hidden" class="btn"><!-- fake sibling to right -->
</form>

<form class="btn-group">
    <i></i><!-- fake sibling to left -->
    <button class="btn">Button Two</button>
</form>

In the latest versions of Bootstrap 2 I did have to add one bit of CSS override:

form.btn-group + form.btn-group {margin-left: -5px;}
like image 146
isherwood Avatar answered Oct 13 '22 12:10

isherwood


You can use JQuery to achieve it.

<form id="form1" action="search.php" method="POST">
 <input type="hidden" name="some name" value="same value">
</form>

<form id="form2" action="edit_product.php" method="post">
 </form>

<div class="btn-group"> 
 <button id="more" style="float:left" class="btn" type="submit"><i class="icon-search"></i>  More</button><!--More button-->
 <button id="edit" class="btn btn-primary" type="submit"  name="product_number" value="some value"><i class="icon-cog icon-white"></i> Edit</button>
 <button data-toggle="modal" href="#error_delete" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</button>    
</div>

And with JQuery:

$("#more").click(function() {
    $("#form1").submit();
}
like image 3
Pigueiras Avatar answered Oct 13 '22 11:10

Pigueiras