I used bootstrap multiselect js plugin, after i used in my code, I need to add one click event for each options i select so i bind the click event for that What happened is when i try to click the select option the function execute 2 times. (It supposed to execute only 1 time)
I want to know whats happening in my code, Can anyone explain me ?
My code HTML:
<div class="select-box">
<select id="demo1" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo2" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo3" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
My code JS:
$(document).ready(function() {
$('.course-list').multiselect();
$('.select-box').each(function(){
$(this).find('.ms-options ul li').each(function(index){
$(this).attr('data-item-index',index);
$(this).attr('onclick','selectToggleItem(this)');
// $(this).bind('click', selectToggleItem);
});
});
});
function selectToggleItem(e){
console.log('test');
}
If i click the list item it call the function (selectToggleItem) 2 times Why ???
i used bootstrap-multiselect.js and css file for this.
You meet this problem when you click on the label because the event is triggered by both input and label tags. If you click on the checkbox, the selectToggleItem is triggered only once.
To prevent that behaviour, you can bind the event to the checkbox instead of the <li> tag.
$(document).ready(function() {
$('.course-list').multiselect();
$('.select-box').each(function(){
$(this).find('.multiselect-container li').each(function(index){
$(this).attr('data-item-index',index);
$(this).find("input[type=checkbox]").bind('click', selectToggleItem);
});
});
});
function selectToggleItem(e){
console.log('test');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<div class="select-box">
<select id="demo1" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo2" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo3" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
Related
I don't know how to figure out my problem. I have three selectors (dropdown) and when the sum of these three lists is greater than 300, there should show a div with a checkbox. It's for my form when a customer want order more than 300 products he can get something for free.
I can get the sum of these lists in a input but the value of this input is not showing so i CAN'T use this to show the div:
//this is not working
Event.observe('total', 'keyup', function () {
if ($$('#total]')[0].value > 299){
$$('#show300')[0].show();
}
else{
$$('#show300')[0].hide();
}
});
<div class="input-group-inzerat"><select name="Produkt 1" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<div class="input-group-inzerat"><select name="Produkt 2" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<div class="input-group-inzerat"><select name="Produkt 3" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<input type="text" name="total" id="total" style="display: block" />
<div class="form-check" id="show300" ><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku "Logo zdarma"</label></div>
Can somebody help me? Please :)
There are multiple select with same id. id need to be unique. So you can use class.
Create two functions one which will add event change to each of this select , so whenever select changes that function will trigger and in another function with every change of select get the value from each of the select element and do the summation of those values to show/hide the div
const showDiv = document.getElementById('show300');
const elem = document.querySelectorAll('.custom-select1');
calculateTotal = () => {
let total = 0;
elem.forEach((item) => {
total += parseInt(item.value, 10);
});
total > 300 ? showDiv.classList.add('show') : showDiv.classList.remove('show')
}
elem.forEach((item) => {
item.addEventListener('change', calculateTotal)
})
.hide {
display: none;
}
.show {
display: block;
}
<div class="input-group-inzerat">
<select name="Produkt 1" class="custom-select1">
<option selected value="0">Množstvo</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
</div>
<div class="input-group-inzerat">
<select name="Produkt 2" class="custom-select1">
<option selected value="0">Množstvo</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
</div>
<div class="input-group-inzerat">
<select name="Produkt 3" class="custom-select1">
<option selected value="0">Množstvo</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
</div>
<input type="text" name="total" id="total" style="display: block" />
<div class="form-check hide" id="show300"><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku "Logo zdarma"</label></div>
I'm still new to Java Script, I'm trying to create a very simple tool, but I have some questions I can't seem to figure out how. Hope any of you can give me some ideas or examples here.
I have two drop down menus and I want to output the selected values and displayed them in a readable way. How can I use document.getElementId and onchange to write a function?
Any help would be greatly appreciated
Example,
Moving from (value from list_1) to (value from list_2)
<script type="text/javascript">
</script>
<div class="moving_1">
<span>* Moving from:</span><br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p>Moving from (value from list_1) to (value from list_2)</p>
Hope it helps. If you have any questions, just ask in comments.
// We find element by id "list_1" then we add an event listener "change"
document.getElementById("list_1").addEventListener("change", function(e) {
// Now we find element by id "moving_1_result" and set its innerHTML to targets value aka list_2's value
document.getElementById("moving_1_result").innerHTML = e.target.value;
});
document.getElementById("list_2").addEventListener("change", function(e) {
document.getElementById("moving_2_result").innerHTML = e.target.value;
});
<div class="moving_1">
<span>* Moving from: <span id="moving_1_result"></span></span>
<br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to: <span id="moving_2_result"></span></span>
<br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
it relatively easy, try the following
//onchange handler
function changed(listId){
var list = document.getElementById(listId);
document.getElementById("val_"+listId).innerHTML = list.value;
}
//initialization
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value;
document.getElementById("val_list_2").innerHTML = document.getElementById("list_2").value;
<div class="moving_1">
<span>* Moving from:</span><br/>
<select onchange="changed('list_1')" name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select onchange="changed('list_2')" name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p>Moving from <span id="val_list_1"></span> to <span id="val_list_2"></span></p>
Let's stay with your original code. You would need to add an eventListener to your dropdown menus and then overwrite the innerHTML of your paragraph.
You can identify your elements either by their class name or by their tag name.
It is preferable to have IDs and not just class names to make the identification process easier.
document.getElementsByClassName("moving_1")[0].addEventListener("change", update_text);
document.getElementsByClassName("moving_2")[0].addEventListener("change", update_text);
function update_text() {
document.getElementById("moving_text").innerHTML = "Moving from " + document.getElementsByClassName("moving_1")[0].getElementsByTagName('select')[0].value + " to " + document.getElementsByClassName("moving_2")[0].getElementsByTagName('select')[0].value;
}
<div class="moving_1">
<span>* Moving from:</span><br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p id="moving_text">Moving from (value from list_1) to (value from list_2)</p>
i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???
I need to add new option in the select dropdown with jquery. For example I need to add: "--" in all three dropdown's after this: <option value="">-</option>. My code is:
<dd class="birth">
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select>
<select id="options_6054_month" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="options_6054_year" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
<option value="">-</option>
<option value="2016">2016</option>
</select>
</dd>
$('#idofselect').find('option:nth-child(1)').after('<option>--</option>')
$('#idofselect') -> Id of the select you want to add the option. If you want to add on all three you can use class that is common on
all three (added sample for class)
.find('option:nth-child(1)') -> look for the first option within the selected select
.after() -> Description: Insert content, specified by the
parameter, after each element in the set of matched elements.
$('.select').find('option:nth-child(1)').after('<option>--</option>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select>
<select id="options_6054_month" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="options_6054_year" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
<option value="">-</option>
<option value="2016">2016</option>
</select>
If you want to add option after first option then I think this will help.
$("select option").eq(0).after("<option>--</option")
Try this
$("select option").each(function(){
if(this.index == 0){
$(this).after("<option>--</option")
}
})
You can use this code:
$(function() {
$('.product-custom-option').find('option:nth-child(1)').after($('<option></option>').attr("value", '--').text('--'));
})
DEMO
'option:nth-child(1)' will select the first option child of select.
.after() will add whatever you write in it after the selected element.
.attr() will allow you to set the attributes of option.
.text() will allow you to add text to option field.
So I have "add" and "delete" buttons that will respectively add/delete input fields. I also have a "preview" button ( using anchor tags) that will send the user to the next page. Upon clicking the preview button, I want to collect all information given and re-displayed on the next page.
I'm totally un aware of how to collect this dynamic information (user will add/delete BEFORE hitting preview, so the amount of input is unknown). How can I pass all this?
Here is what my code/markup looks like (Sorry if it is too many lines of code, I just want to give you as much information as possible):
JavaScript for deleting and adding fields:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>
<div class="panel" style="width:98%; margin:0 auto">
<h5>Terms and Conditions</h5>
<p>I.</p>
<p>II.</p>
<p>III.</p>
<p>IV.</p>
</div>
<hr>
<div align="center">
Preview
</div>
If the information doesn't need to be secure, just use the url to pass parameters:
How to get the value from the GET parameters?
1) on your onclick function, you collect the information and create a string that is going to be the new url (with the parameters)
2) use window.location = newUrl; to access the link
3) in the new page, parse the URL to get the info
You can use localStorage variable to pass values between pages
eg. page 1:
localStorage.setItem("key","value");
page 2:
var value=localStorage.getItem("key");