javascript cicle for duplicated values with select2

javascript cicle for duplicated values with select2 - javascript

Hello guys i'm struggling with this problem.
I have html select with options and a input field to receive the values of the selected options.
So i have a script with FOR to get the options selected, in that input field.
The issue is that in the FOR cicle it writtes repeated values.
In the link posted you will see the problem.
This is the website for testing want i have
This is my code.
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
allowClear: true
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
//alert(opt.value);
}
}
//return opts;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>

You need to empty the input with input.value = '' before the for loop before rewriting the values :
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
function getSelectedOptions(sel) {
var opts = [],
opt;
var len = sel.options.length;
var input = document.getElementById("inputId1");
input.value = ''
for (var i = 0; i < len; i++) {
opt = sel.options[i];
if (opt.selected) {
input.value += opt.value + ",";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<select id="selectedOptions" class="js-example-basic-multiple" name="colaboradores[]" multiple="multiple" style="width:100% !important;" onchange="getSelectedOptions(this)">
<option value="U1">User 1</option>
<option value="U2">User 2</option>
<option value="U3">User 3</option>
<option value="G1">Grupo 1</option>
<option value="G2">Grupo 2</option>
<option value="G3">Grupo 3</option>
</select>
</div>
</div>
<div class="row space-top">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="inputId1">Valores recebidos do select 2</label>
<input type="text" class="form-control" id="inputId1" aria-describedby="peqDesc">
<small id="peqDesc" class="form-text text-muted">Estas são as variáveis que recebo do select 2</small>
</div>
</div>
</div>
</div>

Related

javascript to limit form options on multiple level children inputs

I have the following form, in summary:
kingdom --> phylum --> class --> order --> family --> genus...
If the kingdom = Animalia then the phylum options should be a certain list.
Following on, if the phylum then = Chordata the next drop down input option should be a certain list.
To continue, if the class = Mammalia the next drop down input option should be a certain list... etc.
So a hierarchical form with many dependant levels.
I've looked and tried a few examples, but I can't find a way to do this. Any ideas/suggestions?
Here's the bootstrap html:
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom'>
<option>Animalia</option>
<option>Plantae</option>
<option>Fungi</option>
<option>Protista</option>
<option>Monera</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>phylum/division</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>class</label>
<!-- <input type='text' class='form-control' name='class' value ='Mammalia' placeholder='Mammalia' > -->
<select class="form-control" name='class'>
<option>Mammalia</option>
<option>Aves</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>order</label>
<!-- <input type='text' class='form-control' name='order' value ='Artiodactyla' placeholder='Artiodactyla' > -->
<select class="form-control" name='order'>
<option>Artiodactyla</option>
<option>Aegotheliformes</option>
<option>Perissodactyla</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>family</label>
<!-- <input type='text' class='form-control' name='family' value ='Bovidae' placeholder=' Bovidae' > -->
<select class="form-control" name='family'>
<option>Bovidae</option>
<option>Aegothelidae</option>
<option>Equidae</option>
<option>Delphinidae</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>genus</label>
<input type='text' class='form-control' name='genus' value ='Capra' placeholder='Capra' >
<select class="form-control" name='genus'>
<option>Capra</option>
<option>Ovis</option>
<option>Aegotheles</option>
<option>Oreamnos</option>
<option>Equus</option>
<option>Orcinus</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>subgenus</label>
<input type='text' class='form-control' name='subgenus' value ='Capra (aegagrus) hircus' placeholder='Capra (aegagrus) hircus' >
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>elementName</label>
<!-- <input type='text' class='form-control' name='elementName' value ='a' placeholder='' > -->
<select class="form-control" name='elementName'>
<option>Cranium</option>
<option>Mandible</option>
<option>Teeth</option>
<option>Rib</option>
<option>Humerus</option>
<option>Ulna</option>
<option>Radius</option>
<option>Carpal</option>
<option>Metacarpal</option>
<option>Femur</option>
<option>Patela</option>
<option>Fibula</option>
<option>Tarsal</option>
<option>Metatarsal</option>
<option>Scapula</option>
<option>Vertebrae</option>
<option>Middle Phalanx</option>
<option>Phalanx</option>
<option>Tibia</option>
<option>Astragalus</option>
<option>Calcaneus</option>
<option>Proximal Phalanx</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>

maybe little bit lazy, but it works
if you thought similar
<div class="form-group" >
<select class="form-control" id="sel0">
<option value="0">Choose</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
</select>
<br>
<select class="form-control dispnone" id="sel1_1">
<option value="0">Choose</option>
<option value="1">A4</option>
<option value="2">RS8</option>
</select>
<select class="form-control dispnone" id="sel1_2">
<option value="0">Choose</option>
<option value="1">E36</option>
<option value="2">X5</option>
</select>
<select class="form-control dispnone" id="sel2_1">
<option value="0">Choose</option>
<option value="1">120LE</option>
<option value="2">140LE</option>
</select>
<select class="form-control dispnone" id="sel2_2">
<option value="0">Choose</option>
<option value="1">cyl8</option>
<option value="2">cyl16</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
var select_nums = 3;
$("#sel0").change(function() {
var ch = $("#sel0").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel1_'+i).css({'display':'none'});
}
$('#sel1_'+ch).css({'display':'block'});
}
});
$("#sel1_1").change(function() {
var ch = $("#sel1_1").val();
if(ch==0){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==1){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}else if(ch==2){
for (var i = 1; i < select_nums; i++) {
$('#sel2_'+i).css({'display':'none'});
}
$('#sel2_'+ch).css({'display':'block'});
}
});
});
</script>

I extracted a portion of your html and got it working using an event listener to hide the unwanted options. I hope it helps:
I only considered the first two categories to show the example 'Animalia' and 'Plantae' and considered two subsets of options for each. The change event on the select tag triggers the code to hide and show as required.
function hideSubset(selectedValue){
let secondChoice = document.querySelector('#secondChoice');
let firstChoice = document.querySelector('#firstChoice');
if (selectedValue === 'Animalia'){
secondChoice.style.display = 'none';
firstChoice.style.display = 'block';
} else {
firstChoice.style.display = 'none';
secondChoice.style.display = 'block';
}
}
let mainChoice = document.querySelector('#mainChoice');
mainChoice.addEventListener('change', function(){
hideSubset(mainChoice.value);
}, false);
<div class='col-12 left'>
<div class='form-group'>
<label for='uname'>kingdom</label>
<!-- <input type='text' class='form-control' name='kingdom' value ='Animalia' placeholder='Animalia' > -->
<select class="form-control" name='kingdom' id="mainChoice">
<option>Choose one</option>
<option>Animalia</option>
<option>Plantae</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="firstChoice">
<div class='form-group'>
<label for='uname'>Options for Animalia</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Chordata</option>
<option>Annelid</option>
<option>Arthropod</option>
<option>Bryozoa</option>
<option>Cnidaria</option>
<option>Echinoderm</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
<div class='col-12 left' id="secondChoice">
<div class='form-group'>
<label for='uname'>Options for Plantae</label>
<!-- <input type='text' class='form-control' name='phylum' value ='Chordata' placeholder='Chordata' > -->
<select class="form-control" name='phylum'>
<option>Mollusc</option>
<option>Nematode</option>
<option>Platyhelminthes</option>
<option>Rotifer</option>
<option>Sponge</option>
</select>
<div class='valid-feedback'>Valid.</div>
<div class='invalid-feedback'>Please fill out this field.</div>
</div>
</div>
It shows like this on my side. I use bootstrap 4
Looks like this when loading
When choosing Animalia
When choosing Plantae

Jquery append div depend on select dropdown

I am trying to create this option here.. The user can choose how many rooms he wants.
When he selects I am appending with JQuery the number of rooms he choosed.
Then he can choose how many adults and children there will be in each room. But when he choose for children I want to append another choice (age of children) depend on how many children.
As you can see I can add the rooms but on children I get all the problems.
1.)When I am adding the number of children i can not make it append only on specific div. And children option is working only for the first one.
2.)I tried to hide children age boxes like the rooms but I can not make it work.
Any feedback on what am i doing wrong would be helpful.
Thanks
So this is my code
$(document).ready(function() {
//onchange of rooms-count
$('#search_rooms_select').change(function() {
var roomsSelected = $('#search_rooms_select option:selected').val();
var roomsDisplayed = $('[id^="room-"]:visible').length;
var roomsRendered = $('[id^="room-"]').length;
//if room count is greater than number displayed - add or show accordingly
if (roomsSelected > roomsDisplayed) {
for (var i = 1; i <= roomsSelected; i++) {
var r = $('#room-' + i);
if (r.length == 0) {
var clone = $('#room-1').clone(); //clone
clone.children(':first').text("Room: ");
//change ids appropriately
setNewID(clone, i);
clone.children('div').children('select').each(function() {
setNewID($(this), i);
});
$(clone).insertAfter($('#room-' + roomsRendered));
} else {
//if the room exists and is hidden
$(r).show();
}
}
} else {
//else if less than room count selected - hide
for (var i = ++roomsSelected; i <= roomsRendered; i++) {
$('#room-' + i).hide();
}
}
});
function setNewID(elem, i) {
oldID = elem.attr('id');
newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
elem.attr('id', newId);
}
$('[id^="children-"]').change(function() {
var kidsSelected = $('[id^="children-"] option:selected').val();
for (i = 1; i <= kidsSelected; i++) {
var htmlChildren = "<div class='col-xs-4 col-md-4 col-sm-4'><span class='labelselect'>Child 1</span><select class='form-control' id='childrenage" + i + "'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></div> ";
$(".childrendiv").append(htmlChildren);
}
var kidsDisplayed = $('[id^="childrenage-"]:visible').length;
var kidsRendered = $('[id^="childrenage-"]').length;
});
});
label {
font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='content' id='passengers-popover' style="width: 100%;">
<div class="col-xs-12">
<div class="col-xs-3">
<label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
</div>
<div class="col-xs-9">
<select name="" class="form-control" id="search_rooms_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-12 paddinglr labelform">
<div class="col-xs-4 col-md-4 col-sm-4 paddingright">
<label class="labelselect"></label>
</div>
<div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
<div class="col-xs-6 col-sm-6 col-md-6 paddingright">
<label>Adults</label>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 paddingright">
<label>Children(0-16)</label>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12" id="room-1">
<div class="col-xs-4 col-md-4">
<label>
Room:
</label>
</div>
<div class="col-xs-8 col-md-8 paddinglr">
<div class="col-xs-6 col-sm-6 col-md-6">
<select class="form-control" id='adults-1'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<select class="form-control" id='children-1'>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="childrendiv"> </div>
</div>
<div class="col-xs-12 no-padding">
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>

Select options on two different select box matching those of two different array values jquery

I am trying to generate HTML by joining content from two separate arrays of equal size. For each index in the arrays a pair of selects should be created. The first select would have elements from the first array and the second would have elements from the second array. In both selects, the current element should be selected.
I can create the first set of selects as demonstrated below, but I cannot figure out how to create the second set of selects.
var myArryNames = [
"John",
"jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
for (var j = 1; j < myArryValues.length; j++) {
var thisRow = $('.dropdown').last(".dropdown");
var newid = parseInt(thisRow.attr('divid')) + 1;
newRow = thisRow.clone(true).insertAfter(thisRow).
find('select').each(function() {
$(this).attr('name', 'myDropdown[' + (newid - 1) + ']');
}).end().
find('option[value="' + myArryValues[j] + '"]').each(function() {
$(this).attr('selected', 'selected');
}).end();
thisRow.next('.dropdown').attr("divid", newid).attr("id", "bookTemplate-" + newid);
//$('select[id="bookTemplate-'+newid+'"]').val(myArryValues[j]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>
HTML OUTPUT SHOULD LOOK LIKE BELOW
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World" selected="selected">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John" selected="selected">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" selected="selected">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" selected="selected">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript" >Javascript</option>
<option value="Jquery" selected="selected">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames">
<option value="John">John</option>
<option value="Jennifer" >Jennifer</option>
<option value="Angel" selected="selected">Angel</option>
</select>
</div>

The code below is a modification to your code that I believe does what is wanted by using the "nth-child" selector in jQuery.
Added code to do this by value instead.
var myArryNames = [
"John",
"Jennifer",
"Angel"
];
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
];
$('#bookForm').on('click', '.mynewButton', function() {
$(this).addClass('hide');
$('#bookTemplate-1').removeClass('hide');
var thisRow = $('.dropdown').last(".dropdown");
// Copy the two new rows
for (var j = 0; j < myArryValues.length; j++) {
var row;
// If j is non-zero, we need a new row
if (j) {
var newid = parseInt(thisRow.attr('divid')) + 1;
row = thisRow.clone(true).insertAfter(thisRow);
row.find('.myDropdown').attr('name', 'myDropdown[' + (newid - 1) + ']');
}
else {
row = thisRow;
}
// Alternate 1: select the appropriate options by position. This find will return elements from both divs, but since we don't care what the data is, just the position it works correctly
//row.find('option:nth-child('+(j+1)+')').attr('selected', 'selected');
// Alternate 2: Select the appropriate options by setting the value on the select itself
//row.find('.myDropdown').val(myArryValues[j]);
//row.find('.myNames').val(myArryNames[j]);
// Alternate 3: Manually modify the "selected" attribute of the appropriate options.
row.find('.myDropdown option[value="'+myArryValues[j]+'"]').attr('selected', 'selected');
row.find('.myNames option[value="'+myArryNames[j]+'"]').attr('selected', 'selected');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
<div id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-12 button-div">
<button type="button" class="mynewButton">Add New</button>
</div>
</div>
<div class="form-group dropdown hide" id="bookTemplate-1" divid="1">
<div class="field-row">
<div class="col-md-2 mySelect">
<select class="myDropdown" name="myDropdown[0]">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
<div class="col-md-2 mySelect2">
<select class="myNames" name="myNames[0]">
<option value="John">John</option>
<option value="Jennifer">Jennifer</option>
<option value="Angel">Angel</option>
</select>
</div>
</div>
</div>
</div>

Alert runs when all selectboxes are not filled

I have 5 select boxes that need to be checked.If every one of them is selected before I click the create button. If the five of them are not filled, the click event doesn't work.
JAVASCRIPT
$(document).on("click", "#createButton", function () {
if ($('option:selected', '#getSource').attr("typesource") == 1 ){
console.log('test google');
var checkDomain = $('#changeDomain').val() != "";
var checkSource = $('#getSource').val() != "";
var checkCountries = $('#getCountries').val() != "";
var checkBundle = $('#getBundle').val() != "";
var checkPool = $('#getPool').val() != "";
if (checkDomain && checkSource && checkCountries && checkBundle && checkPool) {
alert('button works');
checkDomain = $('#changeDomain').val();
checkSource = $('#getSource').val();
checkCountries = $('#getCountries').val();
checkBundle = $('#getBundle').val();
checkPool = $('#getPool').val();
console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool);
}
}
});
The alert runs when the last two checkboxes (checkBundle, checkPool) are still empty and when checkDomain, Source and Countries have an option selected.
HTML
<!--DOMAIN-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">DOMAIN</p>
</div>
<select id="changeDomain" class="form-control chosen-select" name="geoFilter[]">
<option value="">Select Domain</option>
<?php echo $selectboxDomains;?>
</select>
</div><!--end col-md-2-->
<!--SOURCE-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">SOURCE</p>
</div>
<select id="getSource" class="form-control chosen-select" name="geoFilter[]">
</select>
</div><!--end col-md-2-->
<!--COUNTRY-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">COUNTRY</p>
</div>
<select id="getCountries" class="form-control chosen-select" name="geoFilter[]">
</select>
</div><!--end col-md-2-->
<!--BUNDLE-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">BUNDLE</p>
</div>
<select id="getBundle" class="form-control chosen-select" id="source" name="geoFilter[]">
</select>
</div><!--end col-md-2-->
<!--POOL-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">POOL</p>
</div>
<select id="getPool" class="form-control chosen-select" id="source" name="geoFilter[]">
</select>
</div><!--end col-md-2-->
If you guys also have any tips for improving my code, I appreciate it! Thanks!

Working fiddle.
Your code will work just fine if you set up a correct click event, check the example below.
Hope this helps.
$(document).on("click", "#createButton", function () {
if ($('option:selected', '#getSource').attr("typesource") == 1 ){
console.log('test google');
var checkDomain = $('#changeDomain').val() != "";
var checkSource = $('#getSource').val() != "";
var checkCountries = $('#getCountries').val() != "";
var checkBundle = $('#getBundle').val() != "";
var checkPool = $('#getPool').val() != "";
if (checkDomain && checkSource && checkCountries && checkBundle && checkPool) {
alert('button works');
checkDomain = $('#changeDomain').val();
checkSource = $('#getSource').val();
checkCountries = $('#getCountries').val();
checkBundle = $('#getBundle').val();
checkPool = $('#getPool').val();
console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool);
}
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<button class="btn btn-primary" id="createButton">Submit</button>
</div><!--end col-md-2-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">DOMAIN</p>
</div>
<select id="changeDomain" class="form-control chosen-select" name="geoFilter[]">
<option value="">Select Domain</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><!--end col-md-2-->
<!--SOURCE-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">SOURCE</p>
</div>
<select id="getSource" class="form-control chosen-select" name="geoFilter[]">
<option value="">Select SOURCE</option>
<option value="1" typesource='1'>1</option>
<option value="2">2</option>
</select>
</div><!--end col-md-2-->
<!--COUNTRY-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">COUNTRY</p>
</div>
<select id="getCountries" class="form-control chosen-select" name="geoFilter[]">
<option value="">Select COUNTRY</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><!--end col-md-2-->
<!--BUNDLE-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">BUNDLE</p>
</div>
<select id="getBundle" class="form-control chosen-select" id="source" name="geoFilter[]">
<option value="">Select BUNDLE</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><!--end col-md-2-->
<!--POOL-->
<div class="col-md-2">
<div class="bulkFiltersDiv">
<p class="bulkFilters">POOL</p>
</div>
<select id="getPool" class="form-control chosen-select" id="source" name="geoFilter[]">
<option value="">Select POOL</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><!--end col-md-2-->
<br><br><br><br><br><br>

$('#createButton').on("click", function () {
if ($('option:selected', '#getSource').attr("typesource") == 1 ){
console.log('test google');
var checkDomain;
var checkSource;
var checkCountries;
var checkBundle;
var checkPool;
var err=0;
$('.chosen-select').each(function(){
if($(this).val()==""){
err++;
}
});
if(err===0){
alert('button works');
checkDomain = $('#changeDomain').val();
checkSource = $('#getSource').val();
checkCountries = $('#getCountries').val();
checkBundle = $('#getBundle').val();
checkPool = $('#getPool').val();
console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool);
}
else{
}
}
}
1.Check if every checkbox has been selected using jquery .each() function
2.Increment err if it has no value.
3.If err==0 proceed

How to Show/Hide Div on SelectedIndex in Bootstrap 3?

I have this code:
<div class="form-group">
<label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label>
<div class="col-sm-11">
<select name="slDisThrough" id="slDisThrough" class="form-control">
<option value="0">-Select-</option>
<option value="1">Agent</option>
<option value="2">Retail</option>
</select>
</div>
</div>
<div id="slAgentID" class="hide">
<div class="form-group">
<label for="slAgent" class="col-sm-1 control-label">Agent</label>
<div class="col-sm-11">
<select name="slAgent" class="form-control">
<option value="0">-Select-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
</div>
</div>
</div>
<div id="slRetailID" class="hide">
<div class="form-group">
<label for="slRetail" class="col-sm-1 control-label">Retail</label>
<div class="col-sm-11">
<select name="slRetail" class="form-control">
<option value="0">-Select-</option>
<option value="1">Hide</option>
<option value="2">Show</option>
</select>
</div>
</div>
</div>
Check this Fiddle
if(document.getElementById("slDisThrough").selectedIndex == 1) {
document.getElementById("slAgentID").style.display = ""; }
else { document.getElementById("slAgentID").style.display = "none"; }
if(document.getElementById("slDisThrough").selectedIndex == 2) {
document.getElementById("slRetail").style.display = ""; }
else { document.getElementById("slRetail").style.display = "none"; }
I need to Show/Hide the DIVs on Selected Value, I was previously using it with JavaScript, but stuck with Bootstrap.

Since you load jQuery, better use it like this:
$('#slDisThrough').on('change', function(){
if ($(this).val() == 1 ) {
$('#slAgentID').removeClass('hide');
$('#slRetailID').addClass('hide');
}
if ($(this).val() == 2 ) {
$('#slAgentID').addClass('hide');
$('#slRetailID').removeClass('hide');
}
})
Jsfiddle here

We Keep Coding

JavaScript is the programming language of the Web.

javascript cicle for duplicated values with select2 - javascript

Related

javascript to limit form options on multiple level children inputs

Jquery append div depend on select dropdown

Select options on two different select box matching those of two different array values jquery

Alert runs when all selectboxes are not filled

How to Show/Hide Div on SelectedIndex in Bootstrap 3?

Categories

Resources