I try to do a selections on companies to add to a group, and after that to do the connection in database. I'm kind of blocked on the "html" code. I work in Laravel
<select id="selectCmp" class="selectpicker" data-live-search="true" multiple title="Select structures">
#foreach($allCompanies as $company)
<option value="{{$company->id}}"> {{$company->name}}</option>
#endforeach
</select>
<iframe name="votar" style="display:none;"></iframe>
<form action={{route('admin.group.affect')}} method="POST" target = "votar">
{{csrf_field()}}
<div id="cmpInputList">
</div>
</br>
<button id="addGroupeBtn" class="btn btn-secondary" type="submit">
Add
</button>
</form>
Ok, if try to inspect the element, I have something like:
<div class="btn-group bootstrap-select show-tick dropup">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button"
data-id="selectCmp" title="Select structures" aria-expanded="true"><span
class="filter-option pull-left"> Select structures</span> <span class="bs-caret"><span
class="caret"></span></span></button>
<div class="dropdown-menu open" role="combobox" style="max-height: 560px; overflow: hidden; min-height: 142px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="textbox"
aria-label="Search"></div>
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false"
style="max-height: 504px; overflow-y: auto; min-height: 86px;">
<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option"
aria-disabled="false" aria-selected="false"><span
class="text"> A</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="selected" data-tokens="null" role="option"
aria-disabled="false" aria-selected="true"><span
class="text"> B </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option"
aria-disabled="false" aria-selected="false"><span
class="text"> C </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select multiple="multiple" id="selectCmp" data-live-search="true" title="Select structures"
class="selectpicker" tabindex="-98">
<option value="1"> A</option>
<option value="0">B</option>
<option value="2"> C</option>
</select>
</div>
<iframe name="votar" style="display: none;"></iframe>
<form action="http://127.0.0.1:8000/admin/affectCmpToGroup" method="POST" target="votar">
<input type="hidden" name="_token" value="KSyRBJq6p6yJBPJnv0EOsC2sJwEe2SbzjxtLtuI5">
<div id="cmpInputList"></div>
<br>
<button id="addGroupeBtn" type="submit" class="btn btn-secondary">
Add
</button>
</form>
So I have a ul with the innerText and mention about selected or not. My problem is how to give the innerText and the value from option (the id) to the form in order to pass that to controller and to database.
I hope it's clear... I'm kind of new in all this.
For non 'multiple' select it is simply $('#selectCmp').val() and
$('#selectCmp option:selected').text().
In this case the array of chosen options ids can be also gotten via $('#selectCmp').val().
To get array of selected option names, it can be done like this:
$('#selectCmp').on('changed.bs.select', function (e) {
var options = $('#selectCmp option:selected');
var selected = [];
$(options).each(function(){
selected.push( $(this).text() );
// or $(this).val() for 'id'
});
// write value to some field, etc
});
Though this code might not be neccessarily bound to 'changed.bs.select', depending on your app logic.
Related
Html Code:
<select class="select2 ddl visible select2-hidden-accessible" data-allow-clear="true" id="Step1Model_CampaignAdditionalDataTypeId" multiple="" name="Step1Model.CampaignAdditionalDataTypeId" tabindex="-1" aria-hidden="true">
<option value="1">Optus AC Number</option>
<option value="2">Date Of Birth</option>
<option value="3">Pass Phrase</option>
<option value="4">Transaction Id</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--above" dir="ltr" style="width: 121.047px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>
</span></span>
<span class="dropdown-wrapper" aria-hidden="true">
</span></span>
I'm using following code(POM) in Selenium Webdriver(with java) to select:
public static By campAddDataType= By.id("Step1Model_CampaignAdditionalDataTypeId");
waitTime = new WebDriverWait(driver,20);
waitTime.until(ExpectedConditions.visibilityOf(driver.findElement(CommonOR.campAddDataType)));
String js = "arguments[0].hidden='false'";
((JavascriptExecutor) driver).executeScript(js,(driver.findElement(CommonOR.campAddDataType)));
CampAdd = new Select(driver.findElement(CommonOR.campAddDataType));
CampAdd.selectByVisibleText("Date Of Birth");
This drop-down list appears when user mark one option to true. So I believe that's why --> aria-hidden="true"
And for this option to make false, I ran java script executor but still the required element doesn't get selected from drop-down list.
Please suggest some solution.
Have you tried the below.
listItem = driver.findElement(By.xpath("//select[#id='Step1Model_CampaignAdditionalDataTypeId']/option[.='Date Of Birth']"))
((JavascriptExecutor) driver).executeScript("arguments[0].click();",listItem);
I have dropdown in my form which has a CSS style defined on pageload and is hidden and the code is like
<div class="col-md-6">
<div class="form-group">
<div id="City" hidden="" style="display: none;">
<label class="control-label" for="City">City</label>
<select name="City" id="City" class="selectboxit visible" style="display: none;"></select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
<span
id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
<ul id="CitySelectBoxItOptions"
class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
</span>
</div>
</div>
</div>
I am able to successfully append the options to this drop down, however they get inserted to a drop down without my CSS style as shown in the below image
After the data is added to drop down the HTML looks like
<div id="City" hidden="" style="display: block;">
<label class="control-label" for="City">City</label>
<select name="City" id="City" class="selectboxit visible" style="">
<option>--Select City--</option>
<option value="1">City 1</option>
<option value="3">City 11</option>
<option value="4">City 111</option>
</select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
<span
id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
<ul id="CitySelectBoxItOptions"
class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
</span>
</div>
and the JQuery code looks like and the targetdropdown value would be "City" here and the Id and values appropriately
$("div#City").toggle();
$('select[name="'+targetdropdown+'"]').empty();
jQuery('select[name="'+targetdropdown+'"]').
append('<option> --Select '+targetdropdown+'-- </option>');
$.each(res[0],function(index, element) {
var newOption = '<option
value="'+element.Id+'">'+element.Name+' </option>';
jQuery('select[name="'+targetdropdown+'"]').
append(newOption);
});
Can you please help me resolve the data being inserted to CSS styled drop down which is empty as you can see in the image
It seems you are using SelectBoxIt jQuery plugin for Custom styled dropdown list. When you done adding dynamic option to your div call .refresh() method.
Add below line at the end of your javascript code.
$('select[name="'+targetdropdown+'"]').data("selectBox-selectBoxIt").refresh();
I have the following problem I have a dropdown on my website. But because I wanted to add style to it, I hid it and have a bootsrap dropdown showing over it.
This is my html structure:
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
I'm trying to change the text Maat_dames to simply just Maat, I've tried the following jQuery code:
if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}
When I check the console log, it returns fail in all three cases, so the element isn't found. Why is that the case?
EDIT
All the answers suggest removing the space between span and .filter-option and while it doesn't work on my site, it does work when I try to run the code snippets in the comments en when I try to recreate it in a JSFiddle.
Could it be the case that jQuery can't find the element since it is dynamically created by a plugin?
You are using a descendant combinator (a space).
span .filter-option means any element that is a member of the class filter-option and has an ancestor that is a span.
The only elements which are members of that class in your document are spans themselves and do not have ancestors that are also spans.
Remove the spaces from the selectors.
if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
Replace jQuery('span .filter-option') with jQuery('span.filter-option').
Currently jQuery('span .filter-option') is finding element with class filter-oprion inside span tags in DOM.
When you write jQuery('span.filter-option') it will find span elements with class filter-option in DOM.
('span.filter-option').length maybe?
Hey guys I am trying to save the option that a user has selected on my form however I am unsure how I can do this.
I will briefly explain my setup...
I have this form on my home page:
<form class="form-home form-search">
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<button href="used-cars.php">Search</button>
</form>
As you can see it is using PHP/MySQL to show the options available.
Okay so I then have this form on another page however the CSS styling is slightly different and it includes a few different select elements.
So when a user has selected an element on the home page all the button does is href to the used-cars.php which lists all of the results.
How can I make it so that jQuery saves the option the user selected on the home page and loads the used-cars.php with those options selected?
Any examples would be great.
EDITED
Example of my second form:
<div class="container con-col-listing">
<div class="row">
<div class="col-md-4 col-sm-4">
<form class="car-finder-container dflt-container">
<h2 class="h2-finder">Car finder</h2>
<ul class="toggle-view">
<li class="li-toggle">
<h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<select name="make" class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['make'] == $_GET['make']?'selected="selected"':'';
echo '
<option value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<?php while($model = $modelFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$model["Model"].'">'.$model["Model"].'</option>
';
} ?>
</select>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
<label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
<input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
<label for="convertible-checkbox" class="label-checkbox">Convertible</label>
<input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
<label for="coupe-checkbox" class="label-checkbox">Coupe</label>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
<label for="automatic-checkbox" class="label-checkbox">Automatic</label>
<input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
<label for="manual-checkbox" class="label-checkbox">Manual</label>
<input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
<label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
</div>
</li>
</ul>
<button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars
</button>
<h4 class="h4-finder">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>
Easiest way is with a get request:
<form class="form-home form-search" method="GET" action="used-cars.php">
<select name="make" class="form-control select-box">
.....
<button type="submit">Search</button>
</form>
and on used-cars.php:
var_dump($_GET['make']);
EDIT
lets suppose on the form on the first page you have:
<option value="ford">ford</option>
<option value="pontiac">pontiac</option>
<option value="fiat">fiat</option>
when you hit the submit button $_GET['make'] on used-cars.php will be whatever was selected lets say fiat.
so now on used-cars.php you can do this:
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['Make'] == $_GET['make']?'selected="selected"':'';
echo '
<option '.$selected.' value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
How can I check if a element has a label and call the toggle function to display it?
Trying this:
if($('label').attr('for') == $(this).attr('name')) {
alert($('label').attr('for') == $(this).attr('name')); // displays true if hidden or displayed
$('label').attr('for='+$(this).attr('name')).toggle(true); // error
}
HTML not hidden (this is just to show the correct syntax as the element is hidden):
<div>
<label for="state" class="ui-select">
State*
</label>
<div class="ui-select">
<a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">State*</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select name="state" id="state" tabindex="-1" class="required">
<option value="">State*</option>
<option value="AK">ALASKA</option>
<option value="...">...</option>
</select>
</div>
</div>
HTML hidden:
<div>
<div class="ui-select">
<a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">State*</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>
</a>
<select name="state" id="state" tabindex="-1" class="required">
<option value="">State*</option>
<option value="AK">ALASKA</option>
<option value="...">...</option>
</select>
</div>
</div>
It sounds like you're looking for $('label[for="' + this.name + '"]').
You can use the Attribute Equals selector to select elements with a specific attribute value.