HTML JQuery: Pass selected value onclick to elements name - javascript

I currently have a dropdown menu so the user can select an option to refine their search by like so:
<button name = "toggle" tabindex="-3" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" >
<li><span class="t">restaurant</span></li>
<li> <span class="t">beauty salon</span></li>
<li> <span class="t">bars</span></li>
<li class="divider"></li>
<li> <span class="t">other</span></li>
</ul>
What I am wanting to do is when an option is selected from the drop down menu to update an elements name so I can then access whatever was selected on the form afters its been submitted. At the minute ive got this:
$(document).ready(function(){
$('ul.dropdown-menu li').click(function()
{
var field = document.createElement("input");
field.name=$(this).find("span.t").text();
}
});
});
How would I go about doing what i specified because I am a little unsure

If I have understood the question correctly you want to create an input element and update it's name property on the click event. If this is the case you can code:
$(document).ready(function() {
// create an input and append to #somewhere
var $field = $('<input>').appendTo('#somewhere');
$('ul.dropdown-menu li').click(function() {
$field.prop('name', $(this).find("span.t").text());
});
});
If the element should be generated on the first click:
var $field;
$('ul.dropdown-menu li').click(function() {
var name = $(this).find("span.t").text().trim();
if ( !$field ) {
$field = $('<input>', {
'type': 'text'
}).appendTo('#somewhere');
}
$field.prop('name', name);
});

Related

Get selected text from bootstrap dropdown

I have a bootstrap dropdown, and I want to keep the text of what is selected. I have tried most of the ways tried here, Get Value From html drop down menu in jquery , but there was never really an answer given, so I am still stuck.
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
I have a js function that looks as follows
$("#tableMenu").click(function(){
var selText = $("#tableMenu").text();
document.getElementById("tableButton").innerHTML=selText;
});
but as explained in the above link, $("#tableMenu").text(); returns everything in the dropdown as a string, not just the one wanted. How do I get the text just from the one selected.
You need to attach the click() handler to the a element within the ul that gets toggled. You can then retrieve the text() of that element and set it to the related button. Try this:
$("#tableMenu a").on('click', function(e) {
e.preventDefault(); // cancel the link behaviour
var selText = $(this).text();
$("#tableButton").text(selText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
Have you tried using an actual HTML drop down box and not an unordered list?
<select name="tableMenu" id="tableMenu" class="dropdown-menu">
<option value="Att1">Att1</option>
<option value="Att2">Att2</option>
<option value="Att3">Att3</option>
</select>
You should then be able to use:
var selText= document.getElementById("tableMenu").value;
Bind the click event to li and using this get the selected text and assign to the tab button text
$("#tableMenu li").click(function () {
var selText = $(this).text();
document.getElementById("tableButton").innerHTML = selText; // $("#tableButton").text(selText); //Using Jquery
});
Here's a vanillaJS way:
Given the following bootstrap 4 dropdown snippet:
<div class="dropdown-menu" id="select-color-dropdown" aria-labelledby="select-color">
<a class="dropdown-item" href="#">Red</a>
<a class="dropdown-item" href="#">Orange</a>
<a class="dropdown-item" href="#">Green</a>
<a class="dropdown-item" href="#">Gray</a>
</div>
One could write an event listener:
/* find web elements */
const colorSelectors = document.querySelector("#select-color-dropdown");
/* define event listeners */
const loadEventListeners = () => {
colorSelectors.addEventListener("click", (e) => {
e.preventDefault();
console.log(e.target.innerText);
});
}
/* Load all event listeners */
loadEventListeners();
which would print the selected option on every select (Red, Green...)

jQuery .closest() not selecting nearest element

For some reason I'm having trouble in selecting an element above another element. I would like to select the nearest .discount-dropdown class that sits aboove the .discount-type class. What am I doing wrong?
HTML (multiple of these):
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false">$ <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
jQuery:
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('.discount-dropdown').html(); //this isn't working
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
because button is not a parent of li
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).closest('ul').prev('.discount-dropdown').html(); //this isn't working
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
I would suggest some changes in the way in which you are updating the currency like
$('.discount-type').on('click', function(event) {
var sign = $(this).html().substr(0, 1);
$(this).closest('ul').prev('.discount-dropdown').find('.currency').text(sign)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle discount-dropdown" data-toggle="dropdown" aria-expanded="false"><span class="currency">$</span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right adjustment-dropdown" role="menu">
<li><a class="discount-type">$</a></li>
<li><a class="discount-type">%</a></li>
</ul>
</div>
Closest function will search for closest parent with given criteria, your button is not any parent of your element. So using closest can be used to find parent for both your elements - discount-type and your button. Having handler to your parent, you can find your button.
$buttonElement = $(this).closest('.input-group-btn').find('.discount-dropdown').html();
input-group-btn - is parent for both elements
discount-dropdown is a child element for input-group-btn
Try this
$('.discount-type').on('click', function(event){
$sign = $(this).html().substr(0,1);
$parentElement = $(this).parent().parent().parent().find('.discount-dropdown').html(); //this is working fine
$newHtml = $sign + $parentElement.substr(1);
alert($newHtml);
});
Working Demo
use closest('ul') instead of closest('.discount-dropdown').
You could also use parentsUntil+parent
$(this).parentsUntil('.discount-dropdown').parent().html();

jQuery toggle through Twitter Bootstrap button classes

Scenario
I would like the user to be able to toggle through the Twitter Bootstrap button classes using jQuery when the main part of the button is clicked (for quickness).
Or
Allow the user to select a state from the drop down menu.
Whatever the state selected, the whole btn-group should have the same button class.
Not Started (btn-info), In Progress (btn-warning), Completed (btn-success) and Late (btn-error).
What I would like
What I have so far
This is my HTML code. It is standard Bootstrap button group.
<div class="btn-group">
<button type="button" class="btn btn-warning">Week 7</button>
<button type="button" class="btn btn-warning dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Not Started
</li>
<li>
In Progress
</li>
<li>
Completed
</li>
<li class="divider"></li>
<li>
Late
</li>
</ul>
</div>
This toggles all of the buttons, not just the button that is clicked.
$('.btn-group').click(function () {
var classes = ['btn btn-info','btn btn-info','btn btn-success'];
$('.btn').each(function(){
this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
});
});
Without changing your HTML you could use the following JavaScript code:
//// TOGGLE ////
// toggle only if the first part of the button (button:first-child) is clicked
$('button:first-child').click(function () {
var classes = ['btn btn-info','btn btn-warning','btn btn-success','btn btn-danger'],
// select new class name first so it isn't changed on every iteration (if you use each)
oldClass = this.className,
newClass = classes[($.inArray(oldClass, classes)+1)%classes.length];
// this method keeps all other classes untouched (e.g. dropdown-toogle)
$([this, this.nextElementSibling])
.removeClass(oldClass)
.addClass(newClass);
});
//// SELECT ////
// add a click listener to every a element
$(".btn-group").each(function () {
var classes = ['btn-info','btn-warning','btn-success','btn-danger'],
buttons = $(this).children("button");
$(this).find("a").each(function (index) {
$(this).click(function () {
// use the a elements index to get the right array element
var newClass = classes[index];
$(buttons)
.removeClass(classes.join(' '))
.addClass(newClass);
});
});
});
Also see the live demo here: http://jsfiddle.net/b9e3ossu/1/
I hope that helps :).

how to change text in a button without change other tags

how to change text in a button without change other tags ?
my button :
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
my dropdown-menu :
<ul class="dropdown-menu">
<li><a id="AllItems" href="#">AllItems</a></li>
<li><a id="Countries" href="#">Countries</a></li>
<li><a id="Ships" href="#">Ships</a></li>
</ul>
I've tried the following But the span tag has been removed:
$('.dropdown-menu li a').click(function () {
var item = $(this).text();
$('button[id=ItemForSearch]').text(item);
});
I need to just change the text.But I have no idea!!
You need to replace only the first text node in the button, that is the problem here. When you use .text() or .html() it replaces the entire contents of the button.
Try
$('.dropdown-menu li a').click(function () {
$('#ItemForSearch').contents().eq(0).replaceWith($(this).text());
});
Demo: Fiddle

How to change the main display of dropdown when an item is selected in bootstrap

This is the following http://jsfiddle.net/coderslay/enzDx/
I am trying to change the text Select as soon as an item is clicked
So if i select One from the list then One should be displayed.
How to do it?
Working example: http://jsfiddle.net/enzDx/5/
The only change I made to your HTML was to wrap the text "Select" with span tags with the element ID dropdown_title so it was easier to update.
JavaScript:
$('.dropdown-toggle').dropdown();
$('#divNewNotifications li').on('click', function() {
$('#dropdown_title').html($(this).find('a').html());
});​
Basically all I'm doing is whenever the user clicks on a list item, I update the drop-down title text with the text of the link contained in the last item.
You can check the click event on the dropdown-menu :
$('.dropdown-menu > li').click(function() {
var $toggle = $(this).parent().siblings('.dropdown-toggle');
$toggle.html("<i class=\"icon icon-envelope icon-white\"></i> " + $(this).text() + "<span class=\"caret\"></span>")
});
jsFiddle : http://jsfiddle.net/enzDx/6/ .
HTML:
<ul class="nav nav-pills left">
<li class="dropdown active span8">
<a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown">
<i class="icon icon-envelope icon-white"></i>
<span id="text">Select</span><span class="caret"></span>
</a>
<ul ID="divNewNotifications" class="dropdown-menu">
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
</ul>
</li>
</ul>
JavaScript:
$('.dropdown-toggle').dropdown();
$('#divNewNotifications li > a').click(function(){
$('#text').text($(this).html());
});
DEMO
I have just added a span around the Select text in html to do the Javascript code simpler.

Categories

Resources