We Keep Coding

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>

Is there a way to show / hide another dropdown from a different dropdown using Bootstrap?

I used the toggle technique but I didn't like it.
<div class="btn-group col-sm-2 col-md-2 col-lg-2">
<label>Patient Type</label>
<button class="form-control btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="Transaction">
Choose Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li href="#corp-toggle" value="Walk-In" data-toggle="collapse">
Walk-In
</li>
<li href="#corp-toggle" value="Corporate" data-toggle="collapse">
Corporate
</li>
</ul>
</div>
<div id="corp-toggle" class="collapse col-sm-5 col-md-5 col-lg-5">
<label>Please Specify your Company:</label>
<button class="form-control btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="Transaction">
Choose Company
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li href="#corp-toggle" value="Walk-In" data-toggle="collapse">
Walk-In
</li>
<li href="#corp-toggle" value="Corporate" data-toggle="collapse">
Corporate
</li>
</ul>
</div>

Thanks guys! I've already resolved it using JS. The initial problem before was if the selection is Walk-In from the drop down list, then the other drop would be hidden. If the selection is Corporate, then the other drop down list would be visible.
the JS code was
function show(frm) {
if (frm.Transaction.value == "Corporate") {
document.getElementById("hide").style.visibility = "visible";
document.getElementById("show").style.visibility = "visible";
}else{
document.getElementById("show").style.visibility = "hidden";
document.getElementById("hide").style.visibility = "hidden";
}
}
I called the function from the first dropdown form:
select class="form-control" Name="Transaction" onClick="show(this.form)
Then called the :
id="show" style="visibility:hidden"
from the second dropdown form

Bootstrap dropdown doesn't select

I have this code, but selection doesn't work.
<div class="input-group-btn">
<button id="entity" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Students
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Teachers</li>
<li>Classes</li>
</ul>
</div>
<input type="text" id="s" class="form-control" aria-label="..." oninput="f()">

Check this simplest Dropdown menu Dropdown Bootstrap
I am not sure what exactly you are trying to get though.

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

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();
});