How do I add rounds 1, 2,3 on multiple select options i.e. Round 1 + Round 5 as selected on the image below, and display on id="total" which will be 6? I have tried but not getting the idea.
HTML form
<div class="form row">
<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
<option value="1">Round 1</option>
<option value="2">Round 2</option>
<option value="3">Round 3</option>
<option value="4">Round 4</option>
<option value="5">Round 5</option>
<option value="6">Round 6</option>
<option value="7">Round 7</option>
<option value="8">Round 8</option>
<option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text">
</div>
Script
<script>
document.querySelector('.form').addEventListener('change', function() {
const nr = +document.getElementById('no_of_rounds').value || 0;
var round_1 = 80;
var round_2 = 90;
var round_3 = 100;
var round_4 = 110;
document.getElementById('total').value = total;
}
}
$('select').selectpicker();
</script>
I think that this is what you are looking for:
document.querySelector('.form').addEventListener('change', function() {
let selectedValues = $('#no_of_rounds').val();
let sum = 0;
$("#no_of_rounds option:selected").each(function () {
let $this = $(this);
if ($this.length) {
sum += parseInt($this.val());
}
});
document.getElementById('total').value = sum;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form row">
<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
<option value="1">Round 1</option>
<option value="2">Round 2</option>
<option value="3">Round 3</option>
<option value="4">Round 4</option>
<option value="5">Round 5</option>
<option value="6">Round 6</option>
<option value="7">Round 7</option>
<option value="8">Round 8</option>
<option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text">
</div>
Here is a version pure JS that works well :
const no_of_rounds = document.querySelector("#no_of_rounds")
//listening to changes
no_of_rounds.addEventListener('change',(event) => {
//getting all checked values
const valuesSelected = no_of_rounds.selectedOptions
//summing up all the values
const sum = Array.from(valuesSelected).map(({ value }) => parseInt(value)).reduce((a, b) => a + b, 0);
//changing the value
document.querySelector("#total").value = sum
})
<div class="form row">
<select class="selectpicker" multiple data-live-search="true" id="no_of_rounds">
<option value="1">Round 1</option>
<option value="2">Round 2</option>
<option value="3">Round 3</option>
<option value="4">Round 4</option>
<option value="5">Round 5</option>
<option value="6">Round 6</option>
<option value="7">Round 7</option>
<option value="8">Round 8</option>
<option value="9">Pay 1st Round - 8th Round</option>
</select>
<input id="total" type="text">
</div>
for the row const sum = Array.from(valuesSelected).map(({ value }) => parseInt(value)).reduce((a, b) => a + b, 0); what i'm doing is :
Getting all the values with const valuesSelected = no_of_rounds.selectedOptions
Changing the type to an array to manipulate it : Array.from(valuesSelected)
Mapping the values to get only values and parsing these to Integers : map(({ value }) => parseInt(value))
Summing the values to get the total : reduce((a, b) => a + b, 0);
You Have to declare global scope variable and add the value accordingly.
Like this.
<script>
var totalValue = 0;
document.querySelector('.form').addEventListener('change', function() {
totalValue = totalValue + (document.getElementById('no_of_rounds').value || 0);
var round_1 = 80;
var round_2 = 90;
var round_3 = 100;
var round_4 = 110;
document.getElementById('total').value = totalValue;
}
}
$('select').selectpicker();
</script>
Related
I'm very new to javascript as you may be able to tell, I'm trying to create a function that will replace a piece of text with either 1 value or the result of an equation based on what is selected via a dropdown menu. I don't know if I'm just being dense and it's something small I messed up or if it's something more complex that I'm missing.
Thank you in advance for any assistance.
<!DOCTYPE html>
<html>
<body>
<label for="gval">G Value:</label>
<input type="text" id="gval" name="gval">
<label for="sval">S Value:</label>
<input type="text" id="sval" name="sval">
<label for="bval">B Value:</label>
<input type="text" id="bval" name="bval">
<label for="dval">D Value:</label>
<input type="text" id="dval" name="dval">
<select id="Level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<span Id="HPVAL">640-247</span>
<script>
var e = document.getElementById("Level");
function onChange() {
var Result = BVALUE+GVALUE*((LVALUE-1)*((0.66+(SVALUE/100-0.05))+((1-(0.66+(SVALUE/100-0.05)))/17)*(LVALUE-1)))
var LVALUE = e.value;
var text = e.options[e.selectedIndex].text;
var HPVALVAR = document.getElementById('HPVAL');
var SVALUE = document.getElementById('sval').value;
var GVALUE = document.getElementById('gval').value;
var BVALUE = document.getElementById('bval').value;
var DVALUE = document.getElementById('dval').value;
const span = (HPVALVAR);
if (LVALUE="default") {
span.innerHTML = DVALUE;
}
else {
span.innerHTML = Result;
}
}
e.onchange = onChange;
onChange();
</script>
</body>
</html>
The way it is meant to function:
it shows a default value you choose an option from the dropdown if the option is the default then it goes back to whatever the default text is supposed to be (I'm not sure how to store values away for later yet so I just have it connected to a text box which I manually enter the info into)
if you choose a value that isn't the default it runs an equation based on values in the other boxes and the value of the current dropdown option, it then replaces the span text with the results of that equation.
You should use == for value or === for type and value comparison.
= is an assignment operator and returns true in if statement.
You can read more about it in the official doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators
<!DOCTYPE html>
<html>
<body>
<label for="gValue">G Value:</label>
<input type="text" id="gValue" name="gValue"><br/>
<label for="sValue">S Value:</label>
<input type="text" id="sValue" name="sValue"><br/>
<label for="bValue">B Value:</label>
<input type="text" id="bValue" name="bValue"><br/>
<label for="dValue">D Value:</label>
<input type="text" id="dValue" name="dValue"><br/>
<select id="level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<br/>
<p>RESULT: <b><span id="hpValue">640-247</span></b></p>
<script>
var levelElement = document.getElementById("level");
level.addEventListener('change',
function(e) {
var levelValue = levelElement.value;
var levelText = levelElement.options[levelElement.selectedIndex].text;
var hpElem = document.getElementById('hpValue');
var gValue = document.getElementById('gValue').value;
var sValue = document.getElementById('sValue').value;
var bValue = document.getElementById('bValue').value;
var dValue = document.getElementById('dValue').value;
var result = bValue + gValue * ((levelValue - 1) * ((0.66 + (sValue / 100 - 0.05)) + ((1 - (0.66 + (sValue / 100 - 0.05))) / 17) * (levelValue - 1)))
levelValue == "default" ? hpElem.textContent = dValue : hpElem.textContent = result;
})
</script>
</body>
</html>
Tried several ways, lot of research (maybe I miss something but can't get it done) so, I was wonder if I can sum selected values of a html select
this is my code
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
And the other one
<select id="m4r1InfoMrS" name="m4r1InfoMrS" >
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
my JS code
<script type="text/javascript">
var m4r1InfoMrP = document.getElementById( "m4r1InfoMrP" ),
m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById( "m4r1InfoMrS" ),
m4r1InfoMrSValue = m4r1InfoMrS.value;
var sum = 0;
var a = m4r1InfoMrPValue;
var b = m4r1InfoMrSValue;
sum = a + b;
document.getElementById("m4r1InfoMrPS").value = sum;
</script>
what I'm looking for is to sum the selected values and show it on m4r1InfoMrPS
thanks in advance
You need to use the change event for each <select> element. Also, you need to convert to number for addition as below.
var m4r1InfoMrP = document.getElementById("m4r1InfoMrP"),
m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById("m4r1InfoMrS"),
m4r1InfoMrSValue = m4r1InfoMrS.value;
m4r1InfoMrP.onchange = () => calculate();
m4r1InfoMrS.onchange = () => calculate();
function calculate() {
m4r1InfoMrPValue = m4r1InfoMrP.value;
m4r1InfoMrSValue = m4r1InfoMrS.value;
var sum = 0;
var a = +m4r1InfoMrPValue;
var b = +m4r1InfoMrSValue;
sum = a + b;
document.getElementById("m4r1InfoMrPS").value = sum;
}
calculate()
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<select id="m4r1InfoMrS" name="m4r1InfoMrS">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<input id="m4r1InfoMrPS" />
I have a program that simulates a folding effect on a flyer that has a front image and a back image. I select the flyers through a dropDownList. How can I pass the back image in the tag so that, when I rotate the image, the picture on the back is shown?
This is the HTML for my dropDownList:
<form name="Pictures">
<select name="dropPic" onchange="selectFront(this.value)">
<option value="Flyer1pag1.png" value="Flyer1pag2.png">Flyer 1</option>
<option value="Flyer2pag1.png" value="Flyer1pag2.png">Flyer 2</option>
<option value="Flyer3pag1.png" value="Flyer1pag2.png">Flyer 3</option>
</select>
</form>
Here is the function in JavaScript that changes the front image regarding the selection of the dropDownList and the function that should take the back image of the flyer:
function selectFront(imgSrc) {
loadImage(imgSrc);
var Dim_Slice = document.querySelectorAll(".slice");
for (var i = 0; i < Dim_Slice.length; i++) {
Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")";
}
}
function selectBack(imgSrc) {
var Dim_Sliceb = document.querySelectorAll(".sliceb");
for (var i = 0; i < Dim_Sliceb.length; i++) {
Dim_Sliceb[i].style.backgroundImage = "url(" + imgSrc + ")";
}
}
it can be done in this way
<select id="dropPic">
<option data-picone="Flyer1pag1.png" data-pictwo="Flyer1pag2.png">Flyer 1</option>
<option data-picone="Flyer2pag1.png" data-pictwo="Flyer1pag2.png">Flyer 2</option>
<option data-picone="Flyer3pag1.png" data-pictwo="Flyer1pag2.png">Flyer 3</option>
</select>
And on change event you can get the value as below
$("#dropPic").change(function () {
alert($(this).find(':selected').data('picone'));
});
Check this link for similar question
Can an Option in a Select tag carry multiple values?
Your question and / or what you're trying to do isn't entirely clear, but I think this is what you want:
<form name="Pictures">
<select name="dropPic"
onchange="selectFront(this.value.split(',')[0]);selectBack(this.value.split(',')[1]);">
<option value="Flyer1pag1.png,Flyer1pag2.png">Flyer 1</option>
<option value="Flyer2pag1.png,Flyer1pag2.png">Flyer 2</option>
<option value="Flyer3pag1.png,Flyer1pag2.png">Flyer 3</option>
</select>
</form>
You cannot have Multiple values in an Option Tag.
If the Name of the Front and Back-Image only differ by the Page-number, you can use this code:
function selectFlyer(name){
selectFront(name+"pag1.png");
selectBack(name+"pag2.png");
}
function selectFront(imgSrc) {
loadImage(imgSrc);
var Dim_Slice = document.querySelectorAll(".slice");
for (var i = 0; i < Dim_Slice.length; i++) {
Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")";
}
}
function selectBack(imgSrc) {
loadImage(imgSrc);
var Dim_Sliceb = document.querySelectorAll(".sliceb");
for (var i = 0; i < Dim_Sliceb.length; i++) {
Dim_Sliceb[i].style.backgroundImage = "url(" + imgSrc + ")";
}
}
<form name="Pictures">
<select name="dropPic" onchange="selectFlyer(this.value)">
<option value="Flyer1">Flyer 1</option>
<option value="Flyer2">Flyer 2</option>
<option value="Flyer3">Flyer 3</option>
</select>
</form>
You can feed it a series of values, separated by commas:
<select id="BLAH" onchange="readBlah()">
<option value="1,car,red">1</option>
<option value="2,car,red">2</option>
<option value="3,truck,blue">3</option>
</select>
function readBlah() {
var e = document.getElementById("BLAH");
feedArray=e.value.split(",");
console.log(feedArray[0]);
console.log(feedArray[1]);
console.log(feedArray[2]);
}
<form method="post">
<select class='form-control' name= 'dropPic'>
<option value="Flyer1pag1.png,Flyer1pag2.png">Flyer 1</option>
<option value="Flyer2pag1.png,Flyer1pag2.png">Flyer 2</option>
<option value="Flyer3pag1.png,Flyer1pag2.png">Flyer 3</option>
</select>
</form>
<?php
$dropPic=$_POST['dropPic'];
$result=explode(',', $dropPic);
$dropPic1=$result[0];
$dropPic2=$result[1];
?>
I select other option on one of my ddl and I succeded on getting that value,but in simultaneously I want to get option on other ddl in the code.
How can I get the other ddl option....?
I put here a code example of my issue:
<select id="someIdName" class="selectMenuFromHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<select id="someIdName" class="selectMenuTillHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
function someFunc(obj) {
var startHour;
var endHour;
if ($(obj).attr('class') == "selectMenuFromHour") {
startHour = $(obj).val();
//*need to add the value of the class - selectMenuTillHour !
}
if ($(obj).attr('class') == "selectMenuTillHour") {
endHour = $(obj).val();
//*need to add the value of the class selectMenuFromHour!
}
}
You can try this:
$('select').change(function(){
var $this = $(this);
var startHour = 0;
var endHour = 0;
if ($this.hasClass("selectMenuFromHour")) {
$this.find('option').each(function(){
startHour += parseInt($(this).val()) || 0;
});
alert(startHour);
}
if ($this.hasClass("selectMenuTillHour")) {
$this.find('option').each(function(){
endHour += parseInt($(this).val()) || 0;
});
alert(endHour);
}
});
Here is the DEMO.
In the following HTML code I would like to realize the following with JavaScript. When the user selects Audi, he has only the option to select application 2 (application 1 has to disappear in this case).
<select>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
I wrote the code here.
html:
<select>
<option id="app1" value="volvo">Volvo</option>
<option id="app2" value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
js:
var selections = document.getElementsByTagName('select');
selections[0].onchange = carSelection;
function carSelection(e) {
var first = selections[0];
var id = first.options[first.selectedIndex].id;
var second = selections[1];
var j = 0;
while (second.options[j]) {
second.options[j].disabled = (second.options[j].value != id );
if (second.options[j].value == id)
second.selectedIndex = j;
j++;
}
}
http://jsfiddle.net/U4y2J/3/
Automatically deselect application 1 when Audi is selected.
http://jsfiddle.net/KQMLQ/1/
HTML
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
jQuery
$("#1").click(function() {
if($("#1").val() === 'volvo') {
$("#2").find('option[value="app1"]').removeAttr('disabled');
}
if($("#1").val() === 'audi') {
$("#2").find('option[value="app1"]').attr('disabled', 'disabled').removeAttr('selected');
$("#2").find('option[value="app2"]').removeAttr('disabled');
}
});
HTML:
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option id="2a" value="app1">application 1</option>
<option id="2b" value="app2">application 2</option>
</select>
Javascript:
<script type="text/javascript">
document.getElementById("1").onchange = change;
function change(){
var s_a = document.getElementById("1");
var car = s_a.options[s_a.selectedIndex].value;
var s_b = document.getElementById("2");
if(car === "audi"){
s_b.options["2b"].disabled = true ;
s_b.options["2a"].selected = true;
}
else {
s_b.options["2b"].disabled = false ;
}
}
</script>
And link to fiddler
Here is a jQuery version DEMO
where I remove the option when the select is audi - it is removed based on values so you can have as many options you want surrounding the option to remove
var opts=[];
$(function() {
$("#sel2 option").each(function(){ // save all options
var opt = {};
opt.value=this.value;
opt.text=this.text;
opts.push(opt);
});
$("#sel1").on("change",function() { // restore relevant options
var sel = $("#sel2");
sel.empty();
var val = $(this).val();
$.each(opts,function(i,opt) {
if (val == "audi" && opt.value=="app2") return;
sel.append('<option value="'+opt.value+'">'+opt.text+'</option>');
});
});
});