CODEWITHSUNDEEP
jquerytwitter-bootstrap
vick
vick

Reputation: 476

Twitter Bootstrap dropdown triggers form submit (search)

<div class="btn-toolbar search-dropdown" style="float:left;margin-right:10px;">
    <div class="btn-group">
        <button class="btn btn-small">All Types</button>
        <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="search-type">
            <li>
                <label class="checkbox">
                    <input type="checkbox" name="tv" value="TV">TV</input></label>
            </li>
            <li>
                <label class="checkbox">
                    <input type="checkbox" name="movies" value="Movies">Movies</input></label>
            </li>
        </ul>
    </div>
</div>

Upvotes: 4

Views: 3409

Answers (4)

Ari Porad
Ari Porad

Reputation: 2922

<div class="btn-toolbar search-dropdown" style="float:left;margin-right:10px;">
<div class="btn-group">
    <button class="btn btn-small">All Types</button>
    <button data-toggle="dropdown" class="btn btn-small dropdown-toggle"><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="search-type">
        <li>
            <label class="checkbox">
                <input type="checkbox" name="tv" value="TV" onclick="search()">TV</input></label>
        </li>
        <li>
            <label class="checkbox">
                <input type="checkbox" name="movies" value="Movies" onclick="search()">Movies</input></label>
        </li>
    </ul>
</div>

Upvotes: 0

landons
landons

Reputation: 9547

Use an <a> element, rather than <button>, for the dropdown toggle. The only downside is potential inconsistencies in rendering if you mix different types. If you're worried about that, switch the submit button to an <a> also, and use javascript to submit the form onclick.

Upvotes: 0

gustavohenke
gustavohenke

Reputation: 41440

That's because <button> elements submit their own form by default - they inherit the type="submit" attribute.

If you don't want 'em to do so, add the attribute type="button", so it will become a normal button.

Upvotes: 13

Peeyush
Peeyush

Reputation: 4828

If you don't want to close your drop down box when some click on the check box then you can do that like this:

jQuery(document).ready(function($){

    $('input[type="checkbox"]').on('click',function(event){
        event.stopPropagation();

    });

});

Upvotes: 0

Related Questions