How to combine a Bootstrap btn-group with an HTML form? - javascript

Using Bootstrap 3.x, the following produces a drop down menu. I need a dropdown menu that behaves like an HTML form, with a (predetermined) value for each item in the dropdown. How can I combine these 2 things to get the functionality of an HTML form with the style of a Bootstrap btn-group?
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<form>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>

You could do something like this..
http://bootply.com/103058
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<form>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
</ul>
And use jquery to prevent the dropdown from closing on click..
$('.dropdown-menu>form').click(function(e){
e.stopPropagation();
});

Related

Bootstrap mixed dropdown toggle

i have 2 dropdown on 1 page, 1 for logout and 1 for chart. the problem is whatever button i pressed dropdown logout always pop up. How do i separate this 2 dropdown button?
my chart
<button class="btn btn-secondary dropdown-toggle" type="button" id="chartDropdown" onclick="dropdownChart()">
Chart
</button>
<div class="dropdown-menu dropdown-menu-right" style="width:400px;" id="dropdownShow" aria-labelledby="chartDropdown">
<form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
{{csrf_field()}}
<div id="items"></div>
<div class="row mx-1 px-2">
<input type="text" name="fromE" value="#" id="fromE">
<input type="text" name="mode" value="add">
<input type="text" name="total" value="" id="total">
<button type='submit' class="btn btn-primary">Purchase</button>
</div>
</form>
</div>
my logout button
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdown()">
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" id="dropdownShow" aria-labelledby="navbarDropdownMenuLink">
<a class="nav-link " href="{{ route('logout') }}">Logout</a>
</div>
</li>
</ul>
Your two dropdown buttons have the same id.
Give a different ID to one of your button like id="dropdownShowChart" for the Chart button and id="dropdownShowLogout" the other one.

How do I create Multiple bootstrap dropdown menus per page that don't interact with each other?

In the following code I use the first bootstrap dropdown to list a selection of items to show. Selecting one creates a bootstrap nav bar with two input fields, a check in field, another dropdown button and two additional buttons. I've put it together like you see in the below example.
The problem is the selection I make in the first dropdown appears in the second dropdown as the title, and that dropdown does not work to give the additional options.
I can't seem to find a way to keep the two dropdown button items from clashing, how can I make them independent of each other?
<div id="container">
<div id="select1" class="dropdown">
<button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
Show All Stations in DB</li>
<li class="divider"></li>
<li role='presentation' class=' bg-success ' data-value="13"'>
<a href='#' role='menuitem' onclick = 'showActivities(13)'>
Item1
</a>
</li>
<li role='presentation' class=' bg-success ' data-value="12"'>
<a href='#' role='menuitem' onclick = 'showActivities(12)'>
Item2
</a>
</li>
</ul>
</div>
</div>
<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
<div class=" container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<input id="cs1" type="text" class="form-control" placeholder="Call Sign" tabindex=1 onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus />
<input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />
</div>
</form>
<button id="ckin2" type="submit" class="btn btn-success" tabindex=3 >Check In</button>
<div class="btn-group">
<button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show/Hide
<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="menu1">
<a role="menuitem" class="dropdown-item" href="#">Show Grid</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show eMail</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Lat/Lon</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Last Name</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show TOD</a>
</div>
</div>
<button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>
<button id="closelog" class=" btn btn-danger navbar-btn closenet " type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>
</div> <!-- end container fluid -->
</nav>
<ul id="txtHint"></ul>
<div id="netids"></div>
<br><br><br>
<div id="actLog" class="hidden">net goes here</div>

How to enable dropdown on searchbox in bootstrap

i am designing searchBox wich has a select(dropdown ) at the right side but when i press on dropdown nothing happens means that i don't see dropdown list items ,i don't know why is not listening to onclick. please help me.
i want to do sothing like this but combo box does not work :
My code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
Hello You are not identifying the class at the first place by writing
<button type="button" class="btn btn-default ></button>
refer the the class name first it will work something like this
<button class="btn btn-default type="button"></button>
use this dropdown code
<div class="dropdown">
<button class="btn btn btn-default dropdown-toggle" type="button" data-
toggle="dropdown">Action
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
and for the Whole Work details Check the below Fiddle I updated Your Work
DropDown Fiddle Demo
I can't clearly under stand your problem but as i understood
if you want to make drop down list you should use
<select class="dropdown-menu">
<option>Action</option>
<option>Another action</option>
<option>Something else here</option>
<option role="separator" class="divider"></option>
<option>Separated link</option>
</select>
The Result will be This :
like this http://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_option_selected
and if you want to Selects a subset of items from array use Filters
like this https://docs.angularjs.org/api/ng/filter/filter
I hope to be useful

Bootstrap dropdown click, uncollapse div

I'm pretty new to HTML, CSS, JS, Bootstrap and JQuery and I have a problem I have been unable to find the solution to.
I have a simple dropdown as such:
<div id="testform" class="container">
<form action="action_page.php">
<fieldset>
<legend>Study</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Digital Media Engineering</li>
</ul>
</div>
</fieldset>
</form>
</div>
And I have a div that is collapsed on document ready
$(document).ready(function(){
$(".focus_hide").addClass("collapse");
});
What I want to do is to get this div to show when clicking on my dropdown value (In this case digital media engineering). However I want to add multiple solutions, so based on what you choose in the dropdown I want to show a div that matches this.. I plan on having multiple divs matching the choices in the dropdown and then only showing the div that matches the choise. The div I want to show when selecting "digital media engineering" is this:
<div class="focus_hide" id="dme">
<form action="action_page.php">
<fieldset>
<legend>Focus Area</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Social media and apps</li>
<li>UX User experience</li>
<li>Data science</li>
<li>Computer games</li>
<li>Computer graphics</li>
</ul>
</div>
</fieldset>
</form>
</div>
What I am missing is the JS code to "un-collapse" the div with id="dme"..
The below code snippet will give you a general idea of what you are needing to do. Please note changes where made to the below to make it work. You will have to find those changes and how they achieve your desired result.
$(document).ready(function() {
$(".focus_hide").hide();
$(".show_dme").click(function() {
$(".focus_hide").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testform" class="container">
<form action="action_page.php">
<fieldset>
<legend>Study</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Study
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Digital Media Engineering
</li>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="focus_hide" id="dme">
<form action="action_page.php">
<fieldset>
<legend>Focus Area</legend>
<div class="dropdown">
<button id="study" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Focus
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Social media and apps
</li>
<li>UX User experience
</li>
<li>Data science
</li>
<li>Computer games
</li>
<li>Computer graphics
</li>
</ul>
</div>
</fieldset>
</form>
</div>

Keep Bootstrap dropdown button focused when even if clicked on input field

I am having a problem keeping bootstrap dropdown button focused when clicked(:focus) on the input field inside the dropdown.
<div id="select_btn">
<div class="btn-group">
<button class="btn btn-custom-select btn-group show-properties dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="select-p-text">Select a Property
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div id="propertyHolder">
<div class="right-inner-addon">
<i class="fa fa-search"></i>
<input placeholder="Search for a property..." id="box" type="search" />
</div>
<li role="separator" class="divider"></li></div>
<li><ul class="selectList">
</ul>
</li>
</div>
</ul>
</div>

Categories