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.
Related
I have an HTML user interface that uses Bootstrap, and has a dropmenu as well as some input fields. What I want to be able to do is populate the input field with the value of the drop-menu selection. So far I haven't been able to bind to that value and have it show up in the input value field.
Here is my code:
<div id="create-job-pane">
<div class="container">
<h2>Create Job</h2>
<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button>
</li>
<li>
<button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button>
</li>
<li>
<button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button>
</li>
</ul>
</div>
</div>
<hr />
<!-- <p id="selection"></p> --> // Works if I populate it here
<div class="form-group">
<label>Job name</label>
<input type="text" class="job-name form-control"> // Bind value here
</div>
<div class="form-group">
<span class="btn btn-default btn-success" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
</div>
// ... other code
<script>
function populateJobVal(val) {
document.getElementById("selection").innerHTML = val;
}
</script>
I tried this:
<input type="text" class="job-name form-control" value="selection">
And this:
<input type="text" class="job-name form-control" id="selection">
... but it did not bind to the input field.
How can I get the value selected when my button is clicked to appear in the input text box?
Just swap the innerHTML to value and you're good to go.
function populateJobVal(val) {
console.log(val);
document.getElementById("selection").value = val;
}
<div id="create-job-pane">
<div class="container">
<h2>Create Job</h2>
<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<button onclick="populateJobVal('option1')" class="btn btn-link">Option #1</button>
</li>
<li>
<button onclick="populateJobVal('option2')" class="btn btn-link">Option #2</button>
</li>
<li>
<button onclick="populateJobVal('option3')" class="btn btn-link">Option #3</button>
</li>
</ul>
</div>
</div>
<hr />
<div class="form-group">
<label>Job name</label>
<input type="text" class="job-name form-control" id="selection"> // Bind value here
</div>
<div class="form-group">
<span class="btn btn-default btn-success" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>
</div>
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>
I have a button called Update which I would like to be disabled until an option is selected from the drop-down menu.
So far I have the button disabled:
$('.btn-update').prop('disabled', true);
This is my markup for the buttons and drop-down menu:
<div class="col-md-12 tableContainer">
<div class="panel-heading import-song-panel text-center">
<div class="panel-title">
<ul class="list-inline">
<li class="pull-right">
<div class="dropdownContainer btn-group text-right">
<button type="button" class="btn btn-primary br2 btn-md fs12 dropdown-toggle table-btn" id="table-actionbtn" data-toggle="dropdown" aria-expanded="false">
Select Status
<span class="caret ml5"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
Accept & Send
Accept
Reject
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 text-right">
<div class="panel-heading import-song-panel text-right">
<input type="button" class="btn btn-primary" id="js_CancelForm" value="Cancel" />
<input type="submit" class="btn btn-success btn-update" id="js_SubmitForm" value="Update" />
</div>
</div>
Would anyone be able to show me how I can enable the button only when a status is selcted from the drop-down menu.
You can add a class to the dropdown options and add a click event as well.
like:
$('.optclick').click(function(){
$('.btn-update').prop('disabled', false);
e.preventDefault();
});
https://jsfiddle.net/Lz8sxmqm/10/
You can add an onclick event on options of dropdown.
Accept & Send
and call an function on click event
function enableButton(){
$('.btn-update').prop('disabled', false);
}
My code below submit's perfectly as i want but the Add & Create new item in the bootstrap dropdown i need to be a submit, i've tried with javascript but then the html5 validation dosen't trigger. Is my only option to try and style the submit button like the bootstrap dropdown-item ?
$('btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
HTML
<form id="WorkOrderFrm" name="WorkOrderFrm" action="/proc/WorkOrderFrm.php" method="post" autocomplete="off">
<div class="btn-group">
<div class="btn-group">
<button type="submit" id="BtnAdd" class="btn btn-custom btn-sm" name="btnWorkorder_Add">Add</button>
<button type="button" class="btn btn-custom btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" name="btnWorkorder_Add_Create" id="btnWorkorder_Add_Create">Add & Create New</a>
</div>
</div>
Why are you needing a dropdown if there is only one option?? Why not just use <input type='submit' value='Add And Create New' />
you are missing '#' tag. try this code and let me know if it is still not working
$('#btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
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>