I have an html form and having a little trouble getting the selected value on it, here is the html
<form>
<div class="row">
<div class="form-group col-xs-12 col-md-8">
<label>Contact Info</label>
<input tabIndex="100" class="form-control square" placeholder="Your email address" autocomplete="off" data-error-style="inline" name="email" type="text">
</div>
<div class="form-group col-xs-12 col-md-4">
<label>Gender</label>
<div class="drop-down-holder ">
<div class="simple-dropdown dropdown btn-dropdown dropdown-module dropdown-toggle"
data-toggle="dropdown"
type="button">
<button tabindex="101" class="dropdown-module dropdown-toggle" type="button" data-toggle="dropdown" data-target="#">
<div class="simple-holder">
<div class="dropdown-label">Select Gender</div>
<div class="icon-holder"><i class="icon-caret-down"></i></div>
</div>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="female">Female</a></li>
<li><a class="male">Male</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
I've tried a few things in console and keep getting empty strings
This is what I've tried
$(".dropdown-menu").text();
This one returns just the text female and male in a string
$(".dropdown-menu").val();
empty string
$(".dropdown-menu :selected").text();
also empty string
$(".dropdown-menu option:selected").text();
empty
$('.dropdown-menu option:selected').val();
undefined
So any clue on how I can get weather the user selected male or female? I need that value for a conditional statement that will redirect them to a certain page depending on their gender.
To cover your previous attempts:
$(".dropdown-menu").text();
.text() returns the .text values of all the element and its child elements, so gives you female and male
$(".dropdown-menu").val();
A ul doesn't have any val(), it's not an <input>
$(".dropdown-menu option:selected").text(); / .val();
A ul is not a <select> so won't have any child items of type <option>
Whatever plugin you are using to convert the ul/li to a 'drop down' will apply a class when you select one of the ul. For now, assume the class is selected, you'll likely need to use:
$(".dropdown-menu li.selected")
to get the li selected, then depending on requirements:
$(".dropdown-menu li.selected").text()
To find out the class that is applied, you could (hopefully) be able to find this in docs for the plugin. If that's not available (or unclear), use a browser (personally, I find Chrome easiest for this) - press F12, find the element and the associated styles, then select the item. The class names should change and you should be able to see this in the console.
Alternatively, there may be an event you can listen to (or your inherited code already listens to) which is fired when the item is clicked and should provide the details for the clicked item.
Hey guys figured out the answer
$(".dropdown-module").val();
this is the class of the button, since bootstrap uses divs and uls for dropdown I needed to target the dropdown-module
Related
Is there any way to get the visible label name and the customized name either by using aria-label or by using aria-labelledby or any other attribute
For example the below code is saying:
<div>
<div id="shankar">Name</div>
<input type="text" aria-labelledby="shankar"/>
</div>
<div>
<div id="set-address">Address</div>
<input type="text" aria-label="set-address"/>
</div>
reader:
Name edit text(for first input box)
Set-address edit text(for 2nd input box)
I have gone through this question: Difference between aria-label and aria-labelledby
What should I do here to get the message as:- Set-address for Address edit text?
which attribute should I use here?
For screen reader, and because your case if for form input, the right syntax is :
<div>
<label for="shankar">Name</label>
<input type="text" id="shankar"/>
</div>
You have to associate Label tag by for attribute who target "id" attribute.
If you are on another case (like dropdown or tabpanel) :
Will be something like (here example show for case dropdown of translation):
// My label structure
<button id="associatedLang" role="button" title="" aria-expanded="true">
<span class="ps-current-lang">FR</span>
<span aria-hidden="true" class="ps-icon ps-icon-chevron-down"></span>
<span class="sr-only">Changer de langue</span>
</button>
//MY associated content
<ul aria-labelledby="associatedLang">
<li class="ng-star-inserted">
<a target="_self" href="####" lang="en" title="EN - English">
EN
</a>
</li>
</ul>
I need to return the value for the top level h5 in a large dropdown menu. If someone clicks on Power Tools, I need a function to return System. I have no idea where to start on this and could really use some help. Thanks in advance.
Here is the code of one of the dropdown menus.
<div class="col">
<div class="list-group pl-4">
<h5 class="font-weight-bold mt-4 mb-2 text-ar-form-text">System</h5>
<a class="mt-2 text-ar-form-text" href="/instruments">Instruments</a>
<a class="mt-2 text-ar-form-text" href="/radio">Radio</a>
<a class="mt-2 text-ar-form-text" href="/power-tools">Power Tools</a>
<a class="mt-2 text-ar-form-text" href="/fluid">Fluid</a>
</div>
</div>
You'll have to create an event listener for click on the a element. See: https://api.jquery.com/click/
Then inside the function, you can use this to refer to the element clicked, and use https://api.jquery.com/parent/ and https://api.jquery.com/child-selector/ to find the element you need. Then use text() to access to its text value https://api.jquery.com/text/.
Based on http://jsfiddle.net/t9vfxo5t/ I want a Semantic UI dropdown as shown but the final result I only want to be displayed as the flag, not the flag and country name text. I still want the country names to appear on the drop down when clicked though.
I tried removing the text in http://jsfiddle.net/Lhzua273/1/ but it then also removes it from the dropdown list.
<div class="ui fluid search selection dropdown">
<input type="hidden" name="language">
<div class="default text">Select language</div>
<div class="menu">
<div class="item" data-value="gb"><i class="gb flag"></i>English</div>
<div class="item" data-value="es"><i class="es flag"></i></div>
</div>
Can anyone suggest how it could be achieved?
(Ultimately it is so I can have 4 icon dropdowns side by side horizontally in a div row as shown so they fit across a mobile phone in portrait mode. It's so the user can select preferred country 1, 2, 3 and 4. I'm also hoping when each list drops down after clicking, they can still fit inside the portrait screen, so the left margin of the dropdown list would need to go negative if the list was hitting the right edge of the screen.)
You want something like this?
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">FLAG</div>
<div class="menu">
<div class="item"><i class="es flag"></i></div>
<div class="item"><i class="jp flag"></i></div>
<div class="item"><i class="ru flag"></i></div>
<div class="item"><i class="cn flag"></i></div>
</div>
</div>
https://jsfiddle.net/busLpjag/
This is bad UX, better to use modal with country selection list.
5 (or more) flags in dropdown = scrollbar inside your dropdown :(
You need to add data-text in each .menu .item element.
Ie:
<div class="item" data-text="Spanish" data-value="es">
<i class="es flag"></i>
</div>
See here: http://jsfiddle.net/9t5qapog/2/
I've also included the flag icon inside the data-text of each option on the JSFiddle. This is not mandatory.
I am currently using angular-drag-and-drop-lists to generate a JsonDTO Object. Generating the graphical representation from a JSON works fine. And generating a JSON by dragging and dropping the different elements works fine as well. I mainly used the nested list tutorial to set up the initial list and setting up the buttons to drag new elements from. However this only works until I try to add dnd-type to the li-elements and dnd-allowed-type to the ul-elements. Using those types is a requirements, as there is a certain hierarchical structure of subelements in the Json I want to create with that 'editor'.
Find below some code snippets how I implemented it. If you need further information let me know. I would really appreciate if anyone could help me with this issue
THe list I want to inset something into:
<div class="form-group label-floating">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" class="form-control" id="name" ng-model="models.questionnaire.name">
</div>
<ul dnd-list="models.questionnaire.pages"
dnd-allowed-types="models.allowedTypes.questionnaire">
<li ng-repeat="page in models.questionnaire.pages"
dnd-draggable="page"
dnd-type="page.type"
dnd-effect-allowed="move"
dnd-moved="models.questionnaire.pages.splice($index, 1)"
dnd-selected="models.selected = page"
ng-class="{'selected': models.selected === page}"
ng-include="'page.html'">
</li>
</ul>
The button to drag a new page from:
<li dnd-draggable="{title: 'title', dndType: 'page', sections: []}"
dnd-effect-allowed="copy">
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Page</button>
</li>
In case anyone has the same question, that is my solution for the button to drag the page from:
<li dnd-draggable="{title: 'title', sections: []}"
dnd-effect-allowed="copy"
dnd-type="'page'">
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Page</button>
</li>
In my case I forgot to set the dnd-type, as it was not used in the example code I looked at.
I have a control group with checkboxes that I want them to be hidden initially, which I achieved with css, during runtime I would like to show those checkboxes at a certain time, but only from the control group that I specify because there are many of them on the page.
The problem that I'm having is to select the visual checkbox since it is being rendered as a "::after" text and I don't know how to select it using JQuery.
<div data-role="controlgroup" id="test-list">
<label for="id1">
<a href="#" onclick="alert('The list item has been clicked.'); event.stopPropagation(); return false;">
<h2>Title</h2>
<p>Description Text</p>
</a>
</label>
<input type="checkbox" id="id1" />
</div>
will render as:
<div class="ui-checkbox">
<label for="id1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off ui-first-child">
<a href="#" onclick="alert('Clicked'); event.stopPropagation(); return false;" class=" ui-link">
<h2>Title</h2>
<p>Description</p>
</a>
::after <!-- This is what renders as the checkbox -->
</label>
<input type="checkbox" id="id1" name="p1">
</div>
I tried a few tricks but can't select the "::after" which is what draws the checkbox inside the list.
$("#test-list label").first().next()
$("#test-list label").children().eq(0).next()
The css when the page loads to hide them:
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after
{
visibility: hidden;
}
jQuery cannot access pseudo elements like :after because they are not really in the DOM. You might get what you want by adding and removing a class that hides the :after element. First create a new CSS class:
.hiddenCheck:after {
display: none !important;
}
Then apply it to the <label> that jQM creates for the checkbox:
$("#id1").parents(".ui-checkbox").find("label").toggleClass("hiddenCheck");
NOTE: different selectors can get you there (e.g. closest(), etc.).
DEMO
Click the button to hide/show the checkbox...