I have an options panel that looks like this:
Attached is my HTML code:
HTML
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Times You Don't Want Classes</h3>
</div>
<div class="panel-body panel-options">
<div id="days" class="checkbox">
<label>
<input type="checkbox"> Mon
</label>
<label>
<input type="checkbox"> Tues
</label>
<label>
<input type="checkbox"> Wed
</label>
<label>
<input type="checkbox"> Thurs
</label>
<label>
<input type="checkbox"> Fri
</label>
</div>
<div class="btn-group">
<a id="from-text" class="btn btn-default">10:00 AM</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="from" class="dropdown-menu time-span">
// These are simply time increments from 7 AM to midnight
#foreach ($timeIncrements as $increment)
<li>{{ $increment }}</li>
#endforeach
</ul>
</div>
to
<div class="btn-group">
<a id="to-text" class="btn btn-default">12:00 PM</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu time-span">
#foreach ($timeIncrements as $increment)
<li>{{ $increment }}</li>
#endforeach
</ul>
</div>
</div>
</div>
What I want to do is, when the user clicks the Monday.. Tuesday.. Wednesday.. and the from-and-to times, to generate a URL for my AJAX code to query that particular URL.
My API looks like the following URL:
example.org/schedulizer/schedule?from=1000&to=1200&days=MW
As you can see, from and to are the spans in which the user does not want classes (so 10 AM to 12 PM in our case)
days are the days they want the span to satisfy (Monday and Wednesday in our case)
This is what I have so far for my JS
JS:
<script type="text/javascript">
$(function()
{
$('#from li').on('click', function(){
$('#from-text').text($(this).text());
});
$('#to li').on('click', function(){
$('#to-text').text($(this).text());
});
$(function(){
$("input[type='checkbox']").change(function(){
var item=$(this);
if(item.is(":checked"))
{
console.log($('#days').attr('value'));
}
});
});
});
</script>
I am quite new to Javascript, so I am quite lost on how to begin. How would I take the values from the checkboxes and dropdowns and generate a URL based on what's selected?
Related
Screenshot with explanation
My shopify store has currency pop out menu that can be opened via an icon button ($).
It would be ideal to display the currency that is selected to the right hand side of the icon button.
The menu is an unordered list and the selected list item is assigned the class "active". The actual text content is wrapped inside a nested "a href:"
I added a <p> with the id "currName" to the right hand side of the icon button and have attempted to show the selected list item in this spot.
HTML:
<div class="tt-desctop-parent-multi tt-parent-box">
<div class="tt-multi-obj tt-dropdown-obj">
<div class="row">
<button class="tt-dropdown-toggle"
data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
data-tposition="bottom">
<i class="icon-e-49"></i><p id="currName"> </p> </button></div>
<div class="tt-dropdown-menu">
<div class="tt-mobile-add">
<button class="tt-close">Close</button>
</div>
<div class="tt-dropdown-menu" style="display: block;">
<div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
<a href="#">
$ Australian Dollar
</a>
</li><li data-currency="USD" class="active">
<a href="#">
$ United States Dollar
</a>
</li></ul></form></div>
</div><br><br>
My code:
<script>
let selectedCurrency = document.querySelectorAll("li, .currency-selector, .active, a[href^='#']").innerHTML;
document.getElementById('currName').innerHTML = selectedCurrency;
</script>
The result is undefined no matter which method I try.
Thanks :)
You need to simply replace document.querySelectorAll with document.querySelector
This will give you an output like this:
https://jsfiddle.net/hdro85k1/
The code will look like this then:
let selectedCurrency = document.querySelector("li, .currency-selector, .active, a[href^='#']").innerHTML;
document.getElementById('currName').innerHTML = selectedCurrency;
<div class="tt-desctop-parent-multi tt-parent-box">
<div class="tt-multi-obj tt-dropdown-obj">
<div class="row">
<button class="tt-dropdown-toggle"
data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
data-tposition="bottom">
<i class="icon-e-49"></i><p id="currName"> </p> </button></div>
<div class="tt-dropdown-menu">
<div class="tt-mobile-add">
<button class="tt-close">Close</button>
</div>
<div class="tt-dropdown-menu" style="display: block;">
<div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
<a href="#">
$ Australian Dollar
</a>
</li><li data-currency="USD" class="active">
<a href="#">
$ United States Dollar
</a>
</li></ul></form></div>
</div><br><br>
You should use the select tag instead of a list.
Example:
const currencySelector = document.getElementById("currency-selector");
currencySelector.addEventListener("change", (e) => {
console.log(e.target.value)
})
<select name="currency" id="currency-selector">
<option value="USD">Dollar</option>
<option value="EUR">Euro</option>
</select>
I am currently creating this option where one obtains all the data from the database, and it can see the data when clicking a dropdown list. The only thing is, I would like to click a single <li> from that dropdown, and place it in a input box below, so the item can be submitted to a different table.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Business Objective
<span class="caret"></span>
</button>
<ul id="bolist" style="margin-left: 575px;" class="dropdown-menu">
<c:forEach var="row" items="${objectives.rows}" varStatus="status">
<li>
<c:out value="${row.objective}"/>
</li>
</c:forEach>
</ul>
</div>
So all the data is in the dropdown there. My input looks like this:
<div class="form-group col-md-8">
<label class="col-md-11 control-lable">Objective</label>
<div class="col-md-11">
<form:input type="text" path="objective" id="inputobjective" class="form-control input-lg"/>
</div>
</div>
Output (for each of the selections, i want the selected value to get into the input)
This should work for you:
$('#bolist').on('click','li',function(){
$('#inputobjective').val( $(this).find('a').text() );
});
Hey all I am trying to get the previous button so that I can change its text to something else once someone selects a value from a select box.
<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">Type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dd1" role="menu">
<li>For Sale</li>
<li>Wanted</li>
</ul>
</div>
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Location</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dd2" role="menu">
<li>Somewhere</li>
<li>Elsewhere</li>
</ul>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
</div>
$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
$(this).prev().find('#search_concept').text($(this).text());
});
So the click event starts from THIS which is the a href="#" data-info="blah1">[value here]< /a> tag. So I am trying to go back to the < button> tag so that I can change the text Type to whatever was selected.
I've tried:
$(this).prev().find('#search_concept').text($(this).text());
and
$(this).prev().prev().find('#search_concept').text($(this).text());
and
$(this).prev().prev().children().find('#search_concept').text($(this).text());
and
$(this).prev().children().find('#search_concept').text($(this).text());
And I can't seem to find it....
fixed
$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
$(this).parents('.search-panel').find('button').html($(this).text() + ' <span class="caret"></span>');
});
The following snippet uses jQuery's .parents to locate a button.
$(this).parents(selector) will find any parent elements that have the specified selector.
Then .find(selector) will search that parent element for the specified selector.
Then you can assign that to a variable and use the element.
$('.search-panel #dd1').find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
var text = $(this).text();
// Assign element to variable for later manipulation
var $button = $(this).parents('.search-panel').find('button');
// eg: Replace button text (replaces all content including html)
// $button.text(text)
// eg: Find another element inside $button and replace the text
// $button.find('#search_concept').text(text)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">Type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dd1" role="menu">
<li>For Sale</li>
<li>Wanted</li>
</ul>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
</div>
You simply can't have multiple SAME ids.
$(this).parents().find("button #search_concept").text($(this).text());
You have duplicated ids which can make things messy. I would change concept of relaying on id to some other selectors, e.g classes:
And so such way you can treat search-panel group as a widget, and javascript going to be rewritten as:
$('.search-panel').each(function() {
var search_concept = $(this).find(".search_concept");
$(this).find('a').click(function(e) {
e.preventDefault();
var param = $(this).data("info");
search_concept.text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="search_concept">Type</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" class="dd" role="menu">
<li>For Sale</li>
<li>Wanted</li>
</ul>
</div>
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="search_concept">Location</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" class="dd" role="menu">
<li>Somewhere</li>
<li>Elsewhere</li>
</ul>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
</div>
This approach will arguably improve portability.
I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.
Oh, JavaScript is not my forte.
The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.
If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.
Thanks.
You could use the Pillbox events to capture the pillbox data via the items method.
HTML:
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript:
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});
This example outputs into a JSON object structure, since the pillbox control supports text and value attributes (and more with data attributes) for each pill.
Is it possible to add AngularJS to a Boostrap dropdown (not a <select/>, but rather the Javascript component)? This is what I have:
<div class="form-group has-feedback" ng-class="{'has-error': editorForm.example.$invalid && !editorForm.example.$pristine, 'has-success': editorForm.example.$valid && !editorForm.example.$pristine}">
<label for="example">Example</label>
<div class="dropdown" id="example" style="width: 90%">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown"
data-toggle="dropdown">
{{exampleLabel}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li data-ng-repeat="example in examples" role="presentation"><a
role="menuitem" tabindex="-1"
data-ng-click="selectExample(example)"
href="javascript:void(0);">{{example.label}}</a>
</li>
</ul>
</div>
$scope.selectExample = function(val) {
$scope.example = val;
}
Is there a way for me to programatically set the validity in selectExample?
Add this hidden text box:
<input type="text" name="exampleLabel" ng-model="exampleLabel" hidden required />
and add this validation after the dropdown
<span class="text-danger" ng-show="myForm.exampleLabel.$error.required">
validation message
</span>
Add input type="hidden":
<form class="form-validation" name="actin_form">
<div uib-dropdown>
<input type="hidden" name="nameVal" ng-model="nameValModel" required/>
<button type="button" ng-class="{'input-error': actin_form.nameVal.$invalid}" class="btn" uib-dropdown-toggle>
<span>{{nameValModel}}</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="type in list" class="text-wrap">
<span>{{type.name}}</span>
</li>
</ul>
</div>
</form>
This work for me.hope you can get some idea.
<style>
.dropdown-has-error{
border-color: #a94442;//bootsrtap warning color
}
</style>
add ng-class directive to the dropdown button
ng-class="{'dropdown-has-error' : example == ''}
in the controller
$scope.example = '';
$scope.selectExample = function(val) {
$scope.example = val;
}
or you can check condition as in the above post,
ng-class="{'dropdown-has-error' : myForm.exampleLabel.$error.required}