I have the following in an HTML form:
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
</span>
</div>
How do I set the name of the button to the value selected from the dropdown menu? I think I need to register an event handler on the button ("userNamesActionButton") and call a function, but how does that function have to look like? I've been unsuccessful so far, but am admittedly not a pro on Jquery, so looking for help here
Thanks!
You can do something like:
You should consider reading jQuery, as it's too much easy for a newbie too.
I have noticed you are using bootstrap, if you want caret without modifying dom, then do as like below.
$('#userNamesActionButtonMenu').on('click', 'li', function(){
$('#userNamesActionButton').html($(this).text()+' <span class="caret"></span>');
});
.input-group{
margin: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
</span>
</div>
If you can modify dom then change these:
DOM From
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
TO:
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
<span class="action-btn-text"></span> <span class="caret"></span>
</button>
And change js to:
$('#userNamesActionButtonMenu').on('click', 'li', function(){
$('.action-btn-text').text($(this).text());
});
How do I set the name of the button to the value selected from the dropdown menu?
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" checked="checked" id="userNamesCheckbox"
name="userNamesCheckbox">
</span>
<input id="userNames" name="userNames" class="form-control"
type="text" placeholder="Ein oder mehrere Nicknames">
<span class="input-group-btn">
<!-- Single button -->
<div class="btn-group">
<button id="userNamesActionButton" type="button" class="btn
btn-default dropdown-toggle" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul id="userNamesActionButtonMenu" class="dropdown-menu">
<li>Filtern</li>
<li>Anzeigen</li>
</ul>
</div>
<script>
function changeButtonText(value){
document.getElementById('userNamesActionButton').innerText = value;
}
</script>
</span>
</div>
Related
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Store Home</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<style>
div#headermenu > div{
float: left;
margin:0px 0px 0px 10px;
}
a{
text-decoration:none;
color:#000;
}
a:hover{
color:#000;
text-decoration:none;
}
a:active{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
div.dropmenus{
display:none;
z-index:2;
}
div.dropmenus > a{
display:block;
text-decoration:none;
color:#000;
}
button{
margin:4px;
}
</style>
<script src="js/getID.js"> </script>
<script type="text/x-javascript">
var ma = ["dropmenu1","dropmenu2","dropmenu3","dropmenu4","dropmenu5"];
function dropMenu(x){
for(var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if( document.getElementById(x).style.display == "block"){
document.getElementById(x).style.display = "none";
}else{
document.getElementById(x).style.display = "block";
}
}
</script>
</head>
<body>
<!--<?php include_once("template-header.php");?> -->
<nav class="navbar navbar-default" style="margin-bottom:5px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Joe Carlo Saber W serge</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Help</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-left" action="search.php" method="post" style="margin-bottom:4px;margin-top:4px;">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" name="search">
</div>
<button type="submit" class="btn btn-info" style="margin-bottom:4px;">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="glyphicon glyphicon-shopping-cart" ></a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="headermenu">
<div id="cont1">
<button class="btn btn-default">
computer parts
<span class="caret"> </span>
</button>
<div id="dropmenu1" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<div id="cont2">
<button class="btn btn-default">
Computers
<span class="caret"> </span>
</button>
<div id="dropmenu2" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
</div>
</div>
<div id="cont3">
<button class="btn btn-default">
Accessories
<span class="caret"></span>
</button>
<div id="dropmenu3" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<div id="cont4">
<button class="btn btn-default">
Gaming
<span class="caret"></span>
</button>
<div id="dropmenu4" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<div id="cont5">
<button class="btn btn-default">
Networking
<span class="caret"></span>
</button>
<div id="dropmenu5" class="dropmenus" >
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button><br>
<button type="button" class="btn btn-default"> item 1</button>
</div>
</div>
<!--add new categories here. -->
</div>
<div id="pageContent" onmousedown="dropMenu()" style="height:500px;"> </div>
<script src="js/jquery-min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js" ></script>
</body>
</html>
Here is my code. The dropdown didn't work for me, so I had to make one from js.
I am adding the jquery to the bottom of the page and I also tried to add the other jquery from the bootstrap source code and still nothing worked I have js enabled in my browser.
You are not declaring the scripts the right way. Use src instead of href
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
I have following code for search bar where there is a Drop down list which I have developed on button and a text field to type search query.
On button click I am retrieving text using
document.getElementById('').value;
But how can fetch selected text of drop down button?
My code :
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
It looks like you're using Bootstrap. Bootstrap components often require jQuery. Use jQuery to bind a click handler to each of the dropdown items you want to retrieve a value from, in this case the <a> tags.
You can store that value in a variable and retrieve it when the search button is click.
(function(window, document, $, undefined) {
var dropdownValue;
/* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */
$('.dropdown-menu a').each(function(i, item) {
/* Add click handler to each one, whenever one is clicked the
dropdownValue variable is updated with it's value */
$(this).on('click', function(e) {
dropdownValue = this.innerText;
});
});
/* Retrieve dropdown value */
$('#apply').on('click', function(e) {
alert(dropdownValue);
});
}(window, window.document, jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches
</li>
<li>Ties
</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Another way would be to apply a class to the selected <a> tag and query for that when the search button is clicked so you don't have to create a variable and update it.
The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:
You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/
The code below populates the first dropdown with distinct pants brands:
$.each(pantsBrands, function(i){
var li = $('<li>')
.appendTo(pantsList);
var aaa = $('<a>')
.text(pantsBrands[i])
.attr('onclick','askPantStyle()')
.appendTo(li);
});
In this next bit of code, I intend to somehow use the selection above to populate the contents in a second dropdown box composed of the styles relevant to the brand chosen in the first.
var askPantStyle = function(){
$('#pantStyleDiv').slideDown();
alert($(this).text());
}
I used the alert to check to see what (this) would return. I had hoped it would be the text content of the first selection, but when the alert box appears, the content is empty.
relevant html below:
<div id='pantsLanding'>
<p class="lead">Which brand of pants fits you best?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Brand</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
<div id='pantStyleDiv'>
<p class="lead">What style do you prefer?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Style</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
Added a quick example below of how you could solve this. Bootstrap dropdowns are quite specific in their usage, so I'm using a click event rather than change that is the normal event for selects.
$('#dropPants').on('click', 'li a', function() { ... });
Also I did not add any data-attributes, as I do not have the full picture of your solution. But I hope you can use this to make things work like you want them to.
You did not provide any data, so I created an array for the brands, and an object for the styles. Each brand has a property in the object containing an array of styles.
var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = {
'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
Anyway, below is a working example of a Bootstrap dropdown populating another dropdown:
var pantsBrands = ['levis','lee','lindeberg'];
var pantsStyles = { 'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
$.each(pantsBrands, function(i) {
$('#dropPants').append('<li>'+pantsBrands[i]+'</li>');
});
$('#dropPants').on('click', 'li a', function() {
$('#dropPantStyle').html('');
var showStyles = pantsStyles[$(this).text()];
$.each(showStyles, function(i) {
$('#dropPantStyle').append('<li>'+showStyles[i]+'</li>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id='pantsLanding'>
<p class="lead">Which brand of pants fits you best?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Brand</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
<div id='pantStyleDiv'>
<p class="lead">What style do you prefer?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Style</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
I want to make input group inline in a list. I wrote the following code :
<div class="container-fluid">
<div class="row">
<ul class="list-inline pull-right">
<li>
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Cart <span class="badge">0</span>
</button>
</li>
<li>
<div class="input-group">
<input id="address" placeholder="City or Zipcode" class="form-control" type="textbox">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addressSearch">Search</button>
</span>
</div>
</li>
</ul>
</div>
</div>
I am not getting input group inline. Please help me to solve this.
You can wrap the first button and the group of elements that you want to in-line with the .input-group class. I am note sure if you're attached to using unordered lists but the code is more expressive if you use spans since what you're representing in on the page is not an unordered list of items.
<div class="container-fluid">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Cart <span class="badge">0</span>
</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div><!-- /input-group -->
</div><!-- /.row -->
</div>