I am facing one problem, I want to show an error when the user has not selected any service from selectbox. I have two checkboxes of Nails and Hair, when user selects the Nails checkbox then, the user must have to select the service from the selectbox. If the user does not select the Hair checkbox then, the selectbox is not mandatory that is below Hair. If both are checked and then both below service must be selected with span serror message. Here is my html:-
enter code here
<div class="one-row">
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/48031.png">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="0" name="services[]" value="1">
<label for="0">Nails</label>
</p>
</span>
<select id="checkSelect-0" name="service_type[Nails]" class="selectpicker" style="display: none;">
<option value="">Select Service</option>
<option value="Salon">Salon</option>
<option value="Mobile beautician">Mobile beautician</option>
<option value="Both">Both</option>
</select>
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-0" title="Select Service"><span class="filter-option pull-left">Select Service</span> <span class="caret"></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li rel="0" class="selected"><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
<span id="serviceError-0" style="color: rgb(169, 68, 66);">Please select service</span>
</div>
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="http://localhost:8000/images/ServiceImages/55643.png">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="1" name="services[]" value="2">
<label for="1">Hair</label>
</p>
</span>
<select id="checkSelect-1" name="service_type[Hair]" class="selectpicker" style="display: none;">
<option value="">Select Service</option>
<option value="Salon">Salon</option>
<option value="Mobile beautician">Mobile beautician</option>
<option value="Both">Both</option>
</select>
<div class="btn-group bootstrap-select dropup">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="checkSelect-1" title="Salon" aria-expanded="false"><span class="filter-option pull-left">Salon</span> <span class="caret"></span></button>
<div class="dropdown-menu open" style="max-height: 519.375px; overflow: hidden; min-height: 92px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 507.375px; overflow-y: auto; min-height: 80px;">
<li rel="0" class=""><a tabindex="0" class="" style=""><span class="text">Select Service</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1" class="selected"><a tabindex="0" class="" style=""><span class="text">Salon</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2"><a tabindex="0" class="" style=""><span class="text">Mobile beautician</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3"><a tabindex="0" class="" style=""><span class="text">Both</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
<span id="serviceError-1" style="color:#A94442; display:none;">Please select service</span>
</div>
Image:-
Now you see that every category having own selectbox
Here is my jquery code :-
$("#checkservice").on('click',function() { // click event on submit button
var n = $( "input:checked" ).length; //
if(n == 0) {
alert("Please Select atleast One Service"); return false;
}
for (var i = 0; i <= 1; i++) {
if ($('#'+i).is(":checked")) {
if ($("#checkSelect-"+i).val() === "") {
$("#serviceError-"+i).show();
return false;
}
}
}
});
This jquery code works only for first checkbox when i select nails and not select any service it will show error but when i select hair checkbox its not showing error
Image:-
I am using laravel framework. Please help me
function onSubmit()
{
var fields = $("input[name='list']").serializeArray();
if (fields.length == 0)
{
alert('nothing selected');
// cancel submit
return false;
}
else
{
alert(fields.length + " items selected");
}
}
// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="subscribeForm">
<fieldset id="cbgroup">
<div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div>
<div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div>
<div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit" value="submit">
</form>
Related
I can’t select elements of the bootstrap drop-down list due to overlapping by another element, as in the screenshot the footer overlaps the two lower elements of the list and they cannot be selected.
I use bootstrap styles.
Such a problem with all dropdowns ...
How to solve this problem?
<div class="form-group">
<div id="select-form-control">
<label for="teamUsers">Выберите участников</label>
<div class="dropdown bootstrap-select show-tick form-control show" style="width: 97%;">
<select id="teamUsers" name="teamUsers" class="selectpicker form-control"
data-actions-box="true" data-dropup-auto="false" data-live-search="true"
data-selected-text-format="count" data-size="10"
data-style="btn-info text-white" data-width="97%" multiple="" required=""
tabindex="-98">
<option value="5">stud stud</option>
<option value="3">student student</option>
<option value="3">student student</option>
<option value="4">student student</option>
</select>
<button type="button" class="btn dropdown-toggle btn-info text-white bs-placeholder"
data-toggle="dropdown" role="combobox" aria-owns="bs-select-1"
aria-haspopup="listbox" aria-expanded="true" data-id="teamUsers"
title="Ничего не выбрано">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">Ничего не выбрано</div>
</div>
</div>
</button>
<div class="dropdown-menu show" x-placement="bottom-start"
style="overflow: hidden; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(6px, 52px, 0px);">
<div class="bs-searchbox"><input type="search" class="form-control"
autocomplete="off" role="combobox"
aria-label="Search" aria-controls="bs-select-1"
aria-autocomplete="list"></div>
<div class="bs-actionsbox">
<div class="btn-group btn-group-sm btn-block">
<button type="button" class="actions-btn bs-select-all btn btn-light">
Выбрать все
</button>
<button type="button" class="actions-btn bs-deselect-all btn btn-light">
Отменить все
</button>
</div>
</div>
<div class="inner show" role="listbox" id="bs-select-1" tabindex="-1"
aria-multiselectable="true" style="overflow-y: auto;">
<ul class="dropdown-menu inner show" role="presentation"
style="margin-top: 0px; margin-bottom: 0px;">
<li><a role="option" class="dropdown-item" id="bs-select-1-0" tabindex="0"
aria-selected="false" aria-setsize="4" aria-posinset="1"><span
class=" bs-ok-default check-mark"></span><span class="text">stud stud</span></a>
</li>
<li><a role="option" class="dropdown-item" id="bs-select-1-1" tabindex="0"
aria-selected="false" aria-setsize="4" aria-posinset="2"><span
class=" bs-ok-default check-mark"></span><span class="text">student student</span></a>
</li>
<li><a role="option" class="dropdown-item" id="bs-select-1-2" tabindex="0"
aria-selected="false"><span class=" bs-ok-default check-mark"></span><span
class="text">student student</span></a></li>
<li><a role="option" class="dropdown-item" id="bs-select-1-3" tabindex="0"
aria-selected="false"><span class=" bs-ok-default check-mark"></span><span
class="text">student student</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am having a select box in my form, and after page loading, it is then transformed to bootstrap button before the select box. I can't set the selected value for the converted bootstrap button drop-down li.
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="Occupation" title="-- Please select Occupation--">
<span class="filter-option pull-left">-- Please select Occupation--</span> <span class="bs-caret">
<span class="caret"></span></span></button>
<div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu">
<li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">-- Please select Occupation--</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Salaried</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Business</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Above 18 Years</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div>
<select name="Occupation" class="form-control show-tick" required="" tabindex="-98">
<option value="">-- Please select Occupation--</option>
<option value="Salaried">Salaried</option>
<option value="Business">Business</option>
<option value="Above 18">Above 18 Years</option>
</select>
I am having the value in localStorage.getItem('Occupation'), and I tried to set the value to that li by using
$('#Occupation ul li').eq(1).find('span').eq(1).text(localStorage.getItem('Occupation')); //not worked
$('#Occupation').parents('.btn-group').find('.dropdown-toggle').html(localStorage.getItem('Occupation')+' <span class="caret"></span>'); //not worked
$("#Occupation li a").filter("[value=" + localStorage.getItem('Occupation') + "]"); //not worked
$("#Occupation").html(localStorage.getItem('Occupation') + ' <span class="caret"></span>'); //not worked
Could someone suggest to me a solution to set the value to that drop-down?
Thanks :)
Upon checking, there is a plugin (bootstrap-select) installed in my site. That plugin modifies my select box to the bootstrap button.
Then I visited the plugin site and got a solution,
$('select[name="Occupation"]').selectpicker('val', localStorage.getItem('Occupation'));
I have number of filters to show products in my shop. I'm using bootstrap-select to style the filter (dropdowns).
When I change a filter value, the other filters automatically hide options if there are no results available for that combination.
The problem is, that there a re now Filters that show that don't have any available options to choose from. In this case I want to hide the Filter completely.
If there are options available the code looks like this:
<div class="form-group ">
<label>Serie</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-serie" title="Bitte wählen..." aria-expanded="true">
<span class="filter-option pull-left">Bitte wählen...</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true">
<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">D-9</span><span class="fontawesome fa fa-check check-mark"></span></a></li>
</ul>
</div>
<label class="custom-select">
<select id="wpv_control_select_wpcf-serie" name="wpv-wpcf-serie[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
<option value="D-9">D-9</option>
</select>
<span></span>
</label>
</div>
</div>
If there is no option available, the code looks like this:
<div class="form-group">
<label>Passend für Helm</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true">
<span class="filter-option pull-left">Bitte wählen...</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
</div>
<label class="custom-select">
<select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98">
</select>
<span></span>
</label>
</div>
</div>
My goal is to add a class .hide-filter to .form-group if the child .dropdown-menu has no li
try below code where you can iterate each form-group and find if it contains dropdown with no li.
$(function(){
$('.form-group').each(function(){
var $dropdown = $(this).find('.dropdown-menu');
if($dropdown.find('li').length==0) {
$(this).addClass('hide-filter');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Passend für Helm</label>
<div class="btn-group bootstrap-select show-tick js-wpv-filter-trigger form-control open"><button type="button" class="btn dropdown-toggle bs-placeholder btn-dropdown btn-default" data-toggle="dropdown" role="button" data-id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" title="Bitte wählen..." aria-expanded="true"><span class="filter-option pull-left">Bitte wählen...</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div
class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true"></ul>
</div><label class="custom-select"><select id="wpv_control_select_wpcf-kompatibilitat-extern-mechanisch" name="wpv-wpcf-kompatibilitat-extern-mechanisch[]" class="selectpicker js-wpv-filter-trigger form-control" multiple="multiple" tabindex="-98"></select><span></span></label></div>
</div>
This is another approach:
$( document ).ready(function() {
if($( ".dropdown-menu.inner:has(li)" ).length == 0){
$( ".form-group" ).addClass( "hide-filter" );
}
});
I want to remove the option from the auto completion input drop down select list.
Unable to get the option value until unless i click on input drop down list. Once I click on the input field the options are auto populating, But i dont know how to get the option here.
The input field before click on it:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1"></div>
<span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
After click on input field:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select" data-query="">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="ajs-layer-placeholder">
<div class="ajs-layer box-shadow" style="width: 248px; position: fixed; left: 153.667px; top: 399.167px; max-height: 171.833px; display: none;">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1" style="display: block;">
<div class="aui-list-scroll" tabindex="-1">
<h5>Project role</h5>
<ul class="aui-list-section aui-last" id="project-role">
<li class="aui-list-item aui-list-item-li-administrators active">
<a class="aui-list-item-link" href="#" title="Administrators">Administrators</a>
</li>
<li class="aui-list-item aui-list-item-li-developers">
<a class="aui-list-item-link" href="#" title="Developers">Developers</a>
</li>
<li class="aui-list-item aui-list-item-li-event-watchers">
<a class="aui-list-item-link" href="#" title="Event Watchers">Event Watchers</a>
</li>
<li class="aui-list-item aui-list-item-li-privilege-users">
<a class="aui-list-item-link" href="#" title="Privilege Users">Privilege Users</a>
</li>
<li class="aui-list-item aui-list-item-li-users">
<a class="aui-list-item-link" href="#" title="Users">Users</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<span class="icon aui-ss-icon drop-menu noloading"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
Here I want to remove the "Users" option from the 'li' in the second code snippet. Please help me regarding this.
Try:
$('#aui-list-item-li-users').remove();
this code will remove the 'li' with the class = aui-list-item-li-users
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}