We Keep Coding

Calculate and Passing Value from select option to input box

I'm new to HTML and JavaScript. I need to do a website where it requires to sum up the Total value based on the select options. After that, pass the value back to the input in HTML.
HTML code
<select class="normalinput" name="giftname" id="giftname" onchange="populate('giftname')">
<option value="None">None</option>
<option value="G0001">Big Graduation Bear +RM60.00</option>
<option value="G0002">Small Graduation Bear +RM20.00</option>
<option value="G0003">Handcraft Gift Card +RM5.00</option>
<option value="G0004">Valentine Gift Card +RM10.00</option>
<option value="G0005">Godiva Chocolate Box +RM100.00</option>
<option value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total"></p>
JavaScript Code
<script type="text/javascript">
function populate(giftname) {
var giftname = document.getElementById(giftname);
var gg = giftname.options[giftname.selectedIndex].value;
var total;
if (gg.value == "G0001") {
total = 90 + 60;
document.getElementById("total").value = total;
}
else if (gg.value == "G0002") {
total = 90 + 20;
document.getElementById("total").value = total;
}
else if (gg.value == "G0003") {
total = 90 + 5;
document.getElementById("total").value = total;
}
else if (gg.value == "G0004") {
total = 90 + 10;
document.getElementById("total").value = total;
}
else if (gg.value == "G0005") {
total = 90 + 100;
document.getElementById("total").value = total;
}
else if (gg.value == "G0006") {
total = 90 + 90;
document.getElementById("total").value = total;
}
else
total = 90;
document.getElementById("total").value = total;
}
</script>
A screenshot of result needed
Thank you so much.

You can add a data attribute to your HTML option elements to contain the price and use it to compute your total price.
<select class="normalinput" name="giftname" id="giftname" onchange="populate('giftname')">
<option data-price="0" value="None">None</option>
<option data-price="60" value="G0001">Big Graduation Bear +RM60.00</option>
<option data-price="20" value="G0002">Small Graduation Bear +RM20.00</option>
<option data-price="5" value="G0003">Handcraft Gift Card +RM5.00</option>
<option data-price="10" value="G0004">Valentine Gift Card +RM10.00</option>
<option data-price="100" value="G0005">Godiva Chocolate Box +RM100.00</option>
<option data-price="90" value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total"></p>
<script type="text/javascript">
populate('giftname');
function populate(giftnameId) {
var giftnameSelect = document.getElementById(giftnameId); // Select dropdown
let selectedOption = giftnameSelect.options[giftnameSelect.selectedIndex]; // Selected option
// Get the selected value. We need the plus to parse it to a number, because initially its a string.
var selectedGiftnameValue = +selectedOption.dataset.price;
var total = 90 + selectedGiftnameValue;
document.getElementById("total").value = total;
}
</script>

You can try a more simple approach.
Assuming you want a dollar value I added
return total.value = Number.parseFloat(price).toFixed(2);
if not replace the above line with
total.value = price;
var price;
var total = document.getElementById('total');
var gg = document.getElementById('giftname');
gg.onchange = function() {
if (gg.value == "G0001") {
price = 90 + 60;
}
else if (gg.value == "G0002") {
price = 90 + 20;
}
else if (gg.value == "G0003") {
price = 90 + 5;
}
else if (gg.value == "G0004") {
total = 90 + 10;
}
else if (gg.value == "G0005") {
price = 90 + 100;
}
else if (gg.value == "G0006") {
price = 90 + 90;
}
else {
price = 90;
}
return total.value = Number.parseFloat(price).toFixed(2);
}
<select class="normalinput" name="giftname" id="giftname" \>
<option value="None">None</option>
<option value="G0001">Big Graduation Bear +RM60.00</option>
<option value="G0002">Small Graduation Bear +RM20.00</option>
<option value="G0003">Handcraft Gift Card +RM5.00</option>
<option value="G0004">Valentine Gift Card +RM10.00</option>
<option value="G0005">Godiva Chocolate Box +RM100.00</option>
<option value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total" ></p>

Javascript to select dropdown option using value from text input?

I need to select a dropdown option based on what my user will enter in a text field. The text field is a number, and the dropdown puts the number in a range to calculate a total based on the price range selected.
The part of the form that deals with this is:
<input name="input_12" id="input_1_20" type="text" value="" class="medium">
<select name="input_15" id="input_1_15">
<option value="0-100 beds|10" price="">0-100 beds </option>
<option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option>
<option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option>
<option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option>
</select>
The javascript I am using is:
<script>
jQuery('#input_1_20').change(function() {
var selectObj = document.getElementById('input_1_15');
var bedNumber = document.getElementById('input_1_20') ;
if (bedNumber <= '100') {
setSelectedValue(selectObj, "0-100 beds|10"); }
else if (bedNumber <= '250') {
setSelectedValue(selectObj, "101-250 beds|7.5"); }
else if (bedNumber <= '500') {
setSelectedValue(selectObj, "251-500 beds|5"); }
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
})
</script>
I'm not getting any javascript errors, but the select field is not being updated. Can anyone advise?
Update: Link to Fiddle - https://jsfiddle.net/xg6ktr1a/
Thanks!

Instead of looping through the select options, try simply setting the value of the select element itself. Here's a comparison of select-value-setting methods from another SO user.
Also, you're trying to use lesser-than/greater-than comparisons on strings, not numbers... so those conditions will never be met. You can fix this by coercing bedNumber to an integer, then checking that number.
jQuery('#input_1_20').change(function() {
var selectObj = document.getElementById('input_1_15');
var bedNumberInput = document.getElementById('input_1_20');
// coerce this value to a Number
var bedNumber = parseInt(bedNumberInput.value);
if (bedNumber <= 100) {
selectObj.value = "0-100 beds|10";
}
else if (bedNumber <= 250) {
selectObj.value = "101-250 beds|7.5";
}
else if (bedNumber <= 500) {
selectObj.value = "251-500 beds|5";
}
else {
selectObj.value = "501+ beds|2500";
}
});

$('#input_1_20').change(function() {
var bedNumber = parseInt(document.getElementById('input_1_20').value);
console.log(bedNumber)
if (bedNumber <= 100) {
$("#input_1_15 option[value='0-100 beds|10']").prop('selected', true);
} else if (bedNumber > 100 && bedNumber <= 250) {
$("#input_1_15 option[value='101-250 beds|7.5']").prop('selected', true);
} else if (bedNumber > 250 && bedNumber <= 500) {
$("#input_1_15 option[value='251-500 beds|5']").prop('selected', true);
} else {
$("#input_1_15 option[value='501+ beds|2500']").prop('selected', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input name="input_12" id="input_1_20" type="text" value="" class="medium">
<select name="input_15" id="input_1_15">
<option value="0-100 beds|10" price="">0-100 beds </option>
<option value="101-250 beds|7.5" price=" -£ 2.50">101-250 -£ 2.50</option>
<option value="251-500 beds|5" price=" -£ 5.00">251-500 -£ 5.00</option>
<option value="501+ beds|2500" price=" +£ 2,490.00">501+ beds +£ 2,490.00</option>
</select>
</form>

The scripts that I made dont work and I can't find the problem

First of all, sorry, I know the next code is wrong, I'm new in programming and I have a problem with it. When the user select an option from the Select, a value it must change, then, the user must write a price in numbers which value must not be higher than the previous value, here is when the scripts should act but it doesn't works. The correct code must be something like that:
<script>
function cboc(){
var cb = $("#cbotipfon").val();
var maxvalGORE = null;
if(cb == 0){
maxvalGORE = 0;
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
}
function cbocc(){
var val = null;
var x = document.GetElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
document.GetElementById('txtprepos').value = "";
}
}
</script>
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon" onchange="cboc()">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" onblur="cbocc()" name="txtprepos" id="txtprepos"/>
I've been with that problem for days. If you can help me I'll be eternally grateful. Thanks in advance and for take your time.

Here is a simple example. No need to declare any function. Just declare your variables correctly and use the addEventListener method for getting the values of the input and select elements.
var maxvalGORE ,val ,cb ,x = null;
document.getElementById("cbotipfon").addEventListener("change", function(){
var cb = document.getElementById('cbotipfon').value;
if(cb == 0){
maxvalGORE = 0;
}
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
});
document.getElementById("txtprepos").addEventListener("change", function(){
x = document.getElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
} else if(val == maxvalGORE) {
alert('The value is equal to $' + maxvalGORE +'.');
} else {
alert('The value is lower than $' + maxvalGORE +'.');
}
document.getElementById('txtprepos').value = "";
});
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" name="txtprepos" id="txtprepos"/>

Javascript Drop Down Menu Currency Converter

Hello everyone I need you guys help with this
It's suppose to convert the value you entered after you choose an option and click convert.
HTML CODE:/(I'm not sure how to use drop down menus with java script)
<html>
<body>
<form>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="1" >Currency 1 to Currency2</option>
<option value="2" >Currency 2 to Currency1</option>
</select>
<br><br>
Value <input type="text" id="value"><br>
Conversion <input type="text" id="conversion"><br><br>
<input type="Button" onclick="Conversion()" value="Convert">
</form>
</body>
</html>
JAVASCRIPT CODE:
<script type="text/javascript">
function Conversion()
{
var val = document.getElementById ("value").value;
var madeSelection = document.getElementById ("Selection").value;
if(madeSelection==1( var ans= +value * 1.37); )){
if(madeSelection==2 ( var ans= +value * 1.30; )){
}
}
conversion.value = ans;
}
</script>

There are several problems that are causing this to be non-functional:
You declare a variable called val that you are not using. Everywhere else in your code, it is called value.
var val = document.getElementById ("value").value;
Older browsers may not deal with a value property of a select element
var madeSelection = document.getElementById ("Selection").value;
Your if statements are malformed (and nested for some reason), and some of the operations are weird.
if(madeSelection==1( var ans= +value( 0.37); )){
if(madeSelection==2 ( var ans= +value * 0.30; )){
...
When properly formatted, your code is:
if (madeSelection == 1(var ans = +value(0.37);)) {
if (madeSelection == 2(var ans = +value * 0.30;)) {
if (madeSelection == 3(var ans = +value * 2.70;)) {
if (madeSelection == 4(var ans = +value * 0.80;)) {
if (madeSelection == 5(var ans = +value * 3.38;)) {
if (madeSelection == 6(var ans = +value * 1.25;)) {}
}
}
}
}
}
When more properly written, it should be:
if (madeSelection == 1) {
var ans = +value(0.37);
}
if (madeSelection == 2) {
var ans = +value * 0.30;
}
if (madeSelection == 3) {
var ans = +value * 2.70;
}
if (madeSelection == 4) {
var ans = +value * 0.80;
}
if (madeSelection == 5) {
var ans = +value * 3.38;
}
if (madeSelection == 6) {
var ans = +value * 1.25;
}
although:
the ans variable, along with all of your other variables should be declared at the top of the function (because that's where they're actually declared anyway, look up variable hoisting).
I'm not sure why you're prefixing the righthand assigment with the +.
value is not a function, but you're apparently attempting to use it as one if madeSelection == 1.
Finally, you're referencing a variable called conversion which has not been defined. This will still probably work as you have an input with an id of conversion and most (but not all) browsers will store the id as a global variable pointing to the element.
Also, when you have many if statements, you may wan't to consider using a switch statement instead.
All together, it should look more like this:
function Conversion() {
var value = document.getElementById("value").value,
conversion = document.getElementById("conversion"),
madeSelection = document.getElementById("Selection"), // get the select
selection = madeSelection.options[madeSelection.selectedIndex].value, // get the selected option
ans = 0;
value = parseFloat(value);
if (!isNaN(value)) {
switch (selection) {
case "6":
ans = value * 1.25;
break;
case "5":
ans = value * 3.38;
break;
case "4":
ans = value * 0.8;
break;
case "3":
ans = value * 2.7;
break;
case "2":
ans = value * 0.3;
break;
case "1":
ans = value * 0.37;
break;
default:
ans = 0;
break;
}
}
conversion.value = ans;
}
<select name="converts" id="Selection">
<option>Choose Option</option>
<option value="1" >EC to US</option>
<option value="2" >EC to Euro</option>
<option value="3" >US to EC</option>
<option value="4" >US to Euro</option>
<option value="5" >Euro to EC</option>
<option value="6" >Euro to US</option>
</select>
<br />
<label for="value">Value</label>
<input type="text" id="value"><br>
<label for="conversion">Conversion</label>
<input type="text" id="conversion"><br><br>
<input type="Button" onclick="Conversion()" value="Convert">

This should work for you:
function Conversion() {
var val = document.getElementById("value").value,
madeSelection = document.getElementById("Selection").value,
ans
if (madeSelection == 1) ans = val * 0.37;
if (madeSelection == 2) ans = val * 0.30;
if (madeSelection == 3) ans = val * 2.70;
if (madeSelection == 4) ans = val * 0.80;
if (madeSelection == 5) ans = val * 3.38;
if (madeSelection == 6) ans = val * 1.25;
document.getElementById("conversion").value = ans;
}
<form>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="1">EC to US</option>
<option value="2">EC to Euro</option>
<option value="3">US to EC</option>
<option value="4">US to Euro</option>
<option value="5">Euro to EC</option>
<option value="6">Euro to US</option>
</select>
<br>
<br>Value
<input type="text" id="value">
<br>Conversion
<input type="text" id="conversion">
<br>
<br>
<input type="Button" onclick="Conversion()" value="Convert">
</form>

Instead a lot IF statements you should use SWITCH.
This is the right way
JS
function Conversion()
{
var val = parseInt(document.getElementById ("value").value);
var madeSelection = parseInt(document.getElementById ("Selection").value);
switch(madeSelection)
{
case 1:
var converted = val * 0.37; //EC to US
break;
case 2:
var converted = val * 0.30; //EC to EUR
break;
case 3:
var converted = val * 2.70; //US to EC
break;
//ETC....
default:
alert('You chose wrong option'); // if user chose wrong option, send him message
break;
}
document.getElementById ("conversion").value = converted;
return false; //prevent for submit form
}
Here is fiddle : http://jsfiddle.net/1cdkvpms/

If statement gives me undefined result

I ve built a form that displays results according what the users select. I am trying to put an if statement together which will output datasheet 1 on choosing the specific values.
I want when somebody choose the 525 and the 134 and the 290 to give me datasheet 1 else give me the datasheet 3. Here is my code:
<form name="test" id="test"">
<label for="select1">Height in (mm)</label>
<select name="division-select" id="height">
<option label="Please Select"></option>
<option value="525">525 or less</option>
<option value="645">645 or less</option>
<option value="1265">up to 1265</option>
<option value="1270">more than 1265</option>
</select>
<label for="select1">Width in (mm)</label>
<select name="division-select" id="width">
<option label="Please Select"></option>
<option value="134w">134 or less</option>
<option value="190w">190 or less </option>
<option value="290w">290 or less</option>
<option value="328w">328 or less</option>
<option value="420w">420 or more</option>
</select>
<Br>
<br>
<label for="select1">Depth in (mm)</label>
<select name="division-select" id="depth">
<option label="Please Select"></option>
<option value="134d">134 or less</option>
<option value="190d">190 or less </option>
<option value="290d">290 or less</option>
<option value="328d">328 or less</option>
<option value="420d">420 or more</option>
</select>
<br><br>
<h2>Or select by load</h2>
<label for="select1">Load in (kN)</label>
<select name="division-select" id="load">
<option label="Please Select"></option>
<option value="2-5">2.5 or less</option>
<option value="5">5 or less </option>
<option value="10">10 or less</option>
<option value="25">25 or less</option>
<option value="50">50 or more</option>
</select>
<br>
<p><input type="button" onclick="calculate();" value="Find your Datasheet" /><input type="button" onclick="formReset()" value="Reset form"></p>
</form>
<div id="result">
</div>
<script type="text/javascript">
function calculate() {
var height = document.getElementById('height').value;
var width = document.getElementById('width').value;
var depth = document.getElementById('depth').value;
var load = document.getElementById('load').value;
if (document.getElementById("height").value == "") {
var heightmsg = "Please select your sample's height.";
document.getElementById("result").innerHTML = heightmsg;
return false;
}
if (document.getElementById("width").value == "") {
var widthmsg = "Please select your sample's width.";
document.getElementById("result").innerHTML = widthmsg;
return false;
}
if (document.getElementById("depth").value == "") {
var depthmsg = "Please select your sample's depth.";
document.getElementById("result").innerHTML = depthmsg;
return false;
}
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134") {
var str = 'Download your Datasheet 1';
} else {
var str = 'Download your Datasheet 3';
}
} else if (height == 1270) {
var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
}
document.getElementById("result").innerHTML = str;
}
function formReset() {
document.getElementById("test").reset();
}
</script>
Thanks in advance.

Your width and depth values end in w and d (e.g. <option value="190d">) but you're not checking for that in your if conditions (if (height === "525" && width === "134" && depth === "290")). Take the w and d out of the values like this:
<select name="division-select" id="width">
<option label="Please Select"></option>
<option value="134">134 or less</option>
<option value="190">190 or less</option>
<option value="290">290 or less</option>
<option value="328">328 or less</option>
<option value="420">420 or more</option>
</select>
jsFiddle example
Side note: you have a condition which appears to never be able to be true:
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134")...

if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134") {
makes no sense. If the first condition is true, the second never can be. I guess you want
if (height === "525" && width === "290" && depth === "134")
var str = 'Download your Datasheet 1';
else if (height === "525" && width === "134" && depth === "290")
var str = 'Download your Datasheet 3';
else if (height == 1270)
var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
Also notice that the values of your <option> tags are suffixed with w and d, so they won't equal the suffix-less numbers.

you are using too many if statements, if you want to specify a seperate link for every option from the three select inputs (width, height, depth) you'll end up with 4x5x5 = 100 if statements. the easiest way around this is to create a mysql databases with all the values and correspondents links, alternatively you can use XML or JSON array.
for the empty select input validation you can use:
var height = document.getElementById('height'),
width = document.getElementById('width'),
depth = document.getElementById('depth'),
load = document.getElementById('load'),
result = document.getElementById('result'),
arr = [height, width, depth],
error = "Please select your sample's ";
for (var i = 0; i < arr.length; i++) {
var t = arr[i].id;
if (arr[i].value == "") result.innerHTML = error + t;
return false;
}
for JSON example see the Demo here on jsfiddle.