new to html I want to show what was selected in <select>

new to html I want to show what was selected in <select> - javascript

I want to show The licorice flavor, chocolate color, and topping chosen. I.e. "Green apple, white, christmas sprinkles."
please help not sure if i should have given each option a numeric value. I just did it just because. Feel free to change it to text or whatever you feel will work. I would love some advice on structuring if you see anything. Thank you in advance.
<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>
<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>
Add to Cart
<div id="result"></div>
<script type="text/javascript">
document.getElementById('link').onclick = function() {
var a = parseInt(document.getElementById('Licorice').value);
var b = parseInt(document.getElementById('Chocolate').value);
var c = parseInt(document.getElementById('Toppings').value);
var answer = (a,b,c);
document.getElementById('result').innerText = answer;
};
</script>

Close. Try this:
var answer = [a,b,c].join(" ");
document.getElementById('result').innerText = answer;

Check this if you can use jquery or this if you are using javascript only
Using the code from the link
<script>
function myNewFunction(sel)
{
alert(sel.options[sel.selectedIndex].text);
}
</script>
<select id="box1" onChange="myNewFunction(this);" >
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

I guesh you want to do this.
document.getElementById('link').onclick = function() {
var a = parseInt(document.getElementById('Licorice').value);
var b = parseInt(document.getElementById('Chocolate').value);
var c = parseInt(document.getElementById('Toppings').value);
var answer = "("+a + "," + b + ","+ c +")";
document.getElementById('result').innerText = answer;
};
<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>
<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>
Add to Cart
<div id="result"></div>

Try this:
document.getElementById('link').onclick = function() {
var a = document.getElementById('Licorice').value;
var b = document.getElementById('Chocolate').value;
var c = document.getElementById('Toppings').value;
var answer = [a,b,c].join(", ");
document.getElementById('result').innerText = answer;
};
Fiddle

Related

Several issues in a page's javascript I'm trying to build, ignoring "If" statement and equation not working, VSCode not giving any errors

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>

outputting same results to other select tags using html

how can i get select option data repeat same info to other select option
like when i select name and get john to Main B then also other select tag get john or wat we got from MAIN B
$(".main").change(function(){
$("."+$(this).val()).show().siblings().not(".main").hide()
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main">
<option value="n">name</option>
</select>
<br>
# MAIN B
<select class="n">
<option value="1">john</option>
</select>
# MAIN A
<select class="n">
<option value="1">get# john if MAIN B got john. its like get wat MAIN B got</option>
</select>
# MAIN C
<select class="n">
<option value="1">get# john if MAIN B got john. its like get wat MAIN B got</option>
</select>
so i want when i select name and get data to MAIN B also get same data to MAIN A AND MAIN C its like repting same data to other select tags

i got this fixed by following #user5173426 post on my recently question
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $cat = $("#category1"),
$subcat = $(".subcat");
var optgroups = {};
$subcat.each(function(i,v){
var $e = $(v);
var _id = $e.attr("id");
optgroups[_id] = {};
$e.find("optgroup").each(function(){
var _r = $(this).data("rel");
$(this).find("option").addClass("is-dyn");
optgroups[_id][_r] = $(this).html();
});
});
$subcat.find("optgroup").remove();
var _lastRel;
$cat.on("change",function(){
var _rel = $(this).val();
if(_lastRel === _rel) return true;
_lastRel = _rel;
$subcat.find("option").attr("style","");
$subcat.val("");
$subcat.find(".is-dyn").remove();
if(!_rel) return $subcat.prop("disabled",true);
$subcat.each(function(){
var $el = $(this);
var _id = $el.attr("id");
$el.append(optgroups[_id][_rel]);
});
$subcat.prop("disabled",false);
});
});
</script>
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="n">name</option>
<option value="a">age</option>
<option value="c">country</option>
</select>
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category2</option>
<optgroup data-rel="n">
<option value="1">john</option>
<option value="2">dan</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="a">
<option value="1">23</option>
<option value="2">24</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="c">
<option value="1">uk</option>
<option value="2">usa</option>
</optgroup>
</select>
</td>
</tr>
<tr>
</tr>
</table>
<p>
<select disabled="disabled" class="subcat" id="select" name="select">
<option value>Select Category2</option>
<!-- Home Ware -->
<optgroup data-rel="n">
<option value="1">john</option>
<option value="2">dan</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="a">
<option value="1">23</option>
<option value="2">24</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="c">
<option value="1">uk</option>
<option value="2">usa</option>
</optgroup>
</select>
</p>
</form>

Try this
<select class="main" id="name">
<option value="n">name</option>
</select>
<br>
# MAIN B
<select class="n" id="b">
<option value="1">john</option>
</select>
# MAIN A
<select class="n" id="a">
<option value="1"></option>
</select>
# MAIN C
<select class="n" id="c">
<option value="1"></option>
</select>
<script>
$('#b').on('change', function () {
var selectedvalue = $('#ddlcompany option:selected').val();
var d = '<option value="' + selectedvalue + '</option>';
$('#a').html(d);
$('#c').html(d);
});
</script>

change the sum after the change in the select field

This is my first post after having come to the forum for years ;)
My problem is that if the "wybierz-diete" changes, the sum value does not change
HTML:
<select id="wybierz-diete">
<option value="fit">Fit</option>
<option value="sport">Sport</option>
<option value="economy">Economy</option>
</select>
<div id="fit" class="fit wybranadieta">
ilość kalori:
<select id="ilosc-kalori1" onchange="calculateTotal()">
<option value="1200">1200</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
jak długo?:
<select name="a1" id="a1" onchange="calculateTotal()">
<option value="f_a1" class="f_a1">1 dzien</option>
<option value="f_a20" class="f_a20">20 dni</option>
<option value="f_a30" class="f_a30">30 dni</option>
<option value="f_b1" class="f_b1">1 dzien</option>
<option value="f_b20" class="f_b20">20 dni</option>
<option value="f_b30" class="f_b30">30 dni</option>
<option value="f_c1" class="f_c1">1 dzien</option>
<option value="f_c20" class="f_c20">20 dni</option>
<option value="f_c30" class="f_c30">30 dni</option>
</select>
</div>
JavaScript:
var fit_a= new Array();
fit_a["f_a1"]=42;
fit_a["f_a20"]=800;
fit_a["f_a30"]=1200;
fit_a["f_b1"]=45;
fit_a["f_b20"]=870;
fit_a["f_b30"]=1300;
fit_a["f_c1"]=48;
fit_a["f_c20"]=940;
fit_a["f_c30"]=1400;
function podliczAfit() {
var podliczAfit=0;
var theForm = document.forms["dieta"];
var selecteda1 = theForm.elements["a1"];
podliczAfit = fit_a[selecteda1.value];
return podliczAfit;
}
function calculateTotal() {
var kosztDiety = podliczAfit();
var divobj = document.getElementById('kosztCalosci');
divobj.style.display='block';
divobj.innerHTML = "Twoje zamówienie wyniesie: $"+kosztDiety;
}
I know that when I will have a solution, I will already have another problem. For example, how to manage when choosing the next diet, a sport, for which I have not written any code yet.

javascript - get selected value from select list

i got a form with a select form elements for month.
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>
How do i use javascript to get compare the selected value. for example if i select Feb, the javascript will pop up "you selected feb"
var monthSelect = document.getElementById("month")
var opt = monthSelect.options[monthSelect.selectedIndex]
if(opt.text == "Feb")
{
alert("Feb selected")
return false
}

JSFiddle: https://jsfiddle.net/ebrnh047/
Your html:
<select id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
Try:
var month = document.getElementById("month");
month.onchange = function() {
if (month.value == "Feb") {
alert("Feb selected");
}
}

This is a way to do it with JavaScript only:
First, your HTML:
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
Then, your script:
var monthSelect = document.getElementById("month");
monthSelect.onchange = function(){
var thisValue = this.value;
alert(thisValue);
};
This is the fiddle: https://jsfiddle.net/16sn90tp/

Make sure you execute this code on document ready event( window.onload )
var monthSelect = document.getElementById("month")
monthSelect.onchange = function() {
var opt = monthSelect.options[monthSelect.selectedIndex]
if (opt.text == "Feb") {
alert("Feb selected")
}
}
<select id="month" name="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sept
<option>Oct
<option>Nov
<option>Dec
</select>

Jan Feb
function myFunction() {
var monthSelect = document.getElementById("month").value;
if (monthSelect == "Feb") {
alert("Feb selected");
return false;
}
}
<select id="month" name="month" onchange="myFunction()">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>

Hi add at first a class called "month" to all of your option tags and one class "monthList" to the select like for example this:
<select class="monthList">
<option class="month">Jan</option>
<option class="month">Feb</option>
<option class="month">Mar</option>
...
</select>
After this you need a little bit of JQuery:
$(".monthList .month").click(function(){
var selectedMonth = $(this).text();
var showText = "you selected " + selectedMonth;
alert(showText);
});
Try this, it should work.

Populate HTML select Tag with first input

Filling every inputs of a working hours form can be quite tedious.
Is there a way to populate every inputs from a form with the first entered value?
In the case of this Fiddle https://jsfiddle.net/az8ujh1e/1/, a first input on any of the opend date would populate the other ones (that could still be modified one by one)
and a first input on the closed dates would do the same on all the closing dates.
Code:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-6">Opend</div>
<div class="col-sm-6">Closed</div>
<form role="form" action="#" method="POST">
<div class="col-sm-6" id="timeopen1">
<select name="timeopen1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed1">
<select name="timeclosed1" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen2">
<select name="timeopen2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed2">
<select name="timeclosed2" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen3">
<select name="timeopen3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed3">
<select name="timeclosed3" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeopen4">
<select name="timeopen4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6" id="timeclosed4">
<select name="timeclosed4" class='selectpicker' >
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="04:00">05:00</option>
<option value="04:00">06:00</option>
</select>
</div>
<div class="col-sm-6"><br>
<button type="submit" class="btn btn-default" name="submit_time" >Submit</button>
</div>
</form>

I think the other answers are missing the point that he values should only be set automatically if the other values have not yet been set.
Add "timeopen" and "timeclosed" classes to your selectors like this:
<select name="timeopen1" class='selectpicker timeopen'>
Then the following script will change the other three values only if they are still set to "00:00".
$(function() {
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen")) {
autoSet(".timeopen", this);
} else {
autoSet(".timeclosed", this);
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});
This may cause a problem if three of them need to be set to "00:00", as it will then change the fourth one to "00:00" as well. So instead of checking the values, you may want to use global variables so that the autoSet only runs once for .timeopen and once for .timeclosed.
$(function() {
var autoSetTimeopen = true;
var autoSetTimeclosed = true;
$(".timeclosed, .timeopen").change(function() {
if ($(this).hasClass("timeopen") && autoSetTimeopen) {
autoSet(".timeopen", this);
autoSetTimeopen = false;
} else if ($(this).hasClass("timeclosed") && autoSetTimeclosed) {
autoSet(".timeclosed", this);
autoSetTimeclosed = false;
}
});
function autoSet(classSelector, t) {
if ($(classSelector + " option[value='00:00']:selected").length == 3) {
$(classSelector).val($(t).val());
}
}
});

If I correctly understood you want to display the value you selected in one field in all other fields from the same type. If so you just need to add a class "open" or "closed" to your select inputs and then proceed like this :
$('select').on('change', function() {
var value = $(this).val();
var className = 'open';
if( $(this).hasClass('closed') ) {
className = 'closed';
}
$('select.' + className).val(value);
});
Here is your Fiddle updated:
https://jsfiddle.net/az8ujh1e/2/

Here is a code which would do what you want, but it is not fully optimized right now. What I would do is, add ids to the select tags, so you can easily work with them with javascript or jquery.
$('#timeopen1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeopen'+i.toString()+' select').val(opt);
}
});
$('#timeclosed1 select').change(function(){
var opt = $(this).val()
for(i = 2; i<=4; i++){
$('#timeclosed'+i.toString()+' select').val(opt);
}
});
EDIT:
Just as someone mentioned in another answer, add classes timeopen and timeclosed to your select elements, so we can easily work with them. Here is the updated code, to set all elements just the first time.
$('.selectpicker').one('change',function(event){
var opt = $(this).val()
if($(this).hasClass('timeopen'))
{
$('.timeopen').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
else
{
$('.timeclosed').each(function(){
$(this).val(opt);
$(this).off('change');
});
}
});
https://jsfiddle.net/az8ujh1e/13/

Develop Reference

JavaScript is the programming language of the Web.

new to html I want to show what was selected in <select> - javascript

Close. Try this: var answer = [a,b,c].join(" "); document.getElementById('result').innerText = answer;

Related

Several issues in a page's javascript I'm trying to build, ignoring "If" statement and equation not working, VSCode not giving any errors

outputting same results to other select tags using html

change the sum after the change in the select field

javascript - get selected value from select list

Populate HTML select Tag with first input

Categories

Resources