We Keep Coding

javascript & HTML Cost Calculator - Value of Carpet x Size of Room

I'm trying to create a cost-calculator for my friend's carpet business website.
I don't know how to get both input fields and multiply them together to get the result/cost.
I'd like it so that a client chooses a carpet type - with cost per m2 associated with it
Then choose the size of the room.
The result would be the cost per m2 x m2 of the room.
I've created this horror show so far, it works for the first part - cost per m2, not the multiplication or size of room part though.
`<select id="classSelect" onchange="aFunction()">
<option value="0">Choose Flooring Type</option>
<option value="1">Vinyl</option>
<option value="2">Thick Carpet</option>
<option value="3">Standard Carpet</option>
<option value="4">Class 4 Cost 4</option>
<option value="5">Class 5 Cost 5</option>
</select>
<select id="size" onchange="bFunction()">
<option value="0">Choose Size</option>
<option value="3">3 Meters Squared</option>
<option value="5">5 Meters Squared</option>
<option value="10">10 Meters Squared</option>
<option value="15">15 Meters Squared</option>
<option value="20">20 meters squared</option>
</select>
<div id="result"></div>
<script>
function aFunction(){
classCost = Number(document.getElementById("classSelect").value);
fee = 5;
if (classCost > 0){
total = classCost + fee;
document.getElementById("result").innerHTML = total;
}else{
document.getElementById("result").innerHTML = ("Select Class");
}
}
</script>`

"I don't know how to get both inputted fields and multiply them together to get the result/cost."
It's not a full implementation of what you want, it's just a good point to start. Here I get values from two inputs, multiply them and write final value to the h1 tag (I didn't add any checks for NaN and so on, it's just a starter for you):
function calculate() {
var result = parseInt(document.getElementById('one').value) * parseInt(document.getElementById('two').value);
document.getElementsByTagName('h1')[0].innerText = result;
}
<input id="one">
<input id="two">
<button onclick="calculate()">Calculate</button>
<h3>Result of multiplication: </h3>
<h1>0</h1>
Update
"Any idea please what I'm missing here - jsfiddle.net/v1ncjkpw "
You just forgot to change function name and insert h1 tag. onchange event doesn't fire on jsfiddle for some reason (it's OK for jsfiddle), so here is the snippet with updated code:
function calculate() {
var result = parseInt(document.getElementById('classSelect').value) * parseInt(document.getElementById('size').value);
document.getElementsByTagName('h1')[0].innerText = result;
}
<select id="classSelect" onchange="calculate()">
<option value="0">Choose Flooring Type</option>
<option value="1">Vinyl</option>
<option value="2">Thick Carpet</option>
<option value="3">Standard Carpet</option>
<option value="4">Class 4 Cost 4</option>
<option value="5">Class 5 Cost 5</option>
</select>
<select id="size" onchange="calculate()">
<option value="0">Choose Size</option>
<option value="3">3 Meters Squared</option>
<option value="5">5 Meters Squared</option>
<option value="10">10 Meters Squared</option>
<option value="15">15 Meters Squared</option>
<option value="20">20 meters squared</option>
</select>
<h1>0<h1>

As what i understood from you question is that you want to multiple both selected values like (class+5) * size
function calculate(){
var classCost = Number(document.getElementById("classSelect").value);
if (classCost === 0){
document.getElementById("result").innerHTML = "Select Class";
return;
}
var roomSize = Number(document.getElementById("size").value);
if (roomSize === 0){
document.getElementById("result").innerHTML = "Select Size";
return;
}
var total = (classCost + 5) * roomSize;
document.getElementById("result").innerHTML = "Total Cost is " + total;
}
<select id="classSelect" onchange="calculate()">
<option value="0">Choose Flooring Type</option>
<option value="1">Vinyl</option>
<option value="2">Thick Carpet</option>
<option value="3">Standard Carpet</option>
<option value="4">Class 4 Cost 4</option>
<option value="5">Class 5 Cost 5</option>
</select>
<select id="size" onchange="calculate()">
<option value="0">Choose Size</option>
<option value="3">3 Meters Squared</option>
<option value="5">5 Meters Squared</option>
<option value="10">10 Meters Squared</option>
<option value="15">15 Meters Squared</option>
<option value="20">20 meters squared</option>
</select>
<div id="result"></div>
Please see the solution on fiddle

how to add selected values from two <select> tag and show sum in third <select>

$(document).ready(function () {
var presentyear = new Date().getFullYear();
for(y = 1995; y <= presentyear; y++)
{
var optn = document.createElement("option");
optn.text = y;
optn.value = y;
document.getElementById('year10').options.add(optn);
}
});
<select id="year10">
<option>select year</option>
//all the values will be dynamically added as called by function in js
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<select id="year12">
<option id="calvalue"> </option>
</select>
I want to save selected values from two select tags and show the sum in a separate third select dropdown.
As in the snippet above, I have three select tags, the javascript code fills the options for 'year10' select from 1995 to 2017.
The 'gap' select have 5 values.
Now, i want to add the selected values of 'year10' and 'gap' and show in the single option (with id='calvalue') in 'year12' select tag.
Also, when i change the values in either first two selects, the summed value in year12 must change with it.
How to do this?
Any help is appreciated

To achieve this you just need to add a change event handler to both of the selects which reads the values and adds them together.
Note that putting the result in another option of a select is a little odd. I'd suggest using a readonly text box instead, something like this:
$(function() {
var presentyear = new Date().getFullYear(), options = '';
for (y = 1995; y <= presentyear; y++) {
options += '<option value="' + y + '">' + y + '</option>';
}
$('#year10').append(options);
$('#year10, #gap').change(function() {
var year = parseInt($('#year10').val(), 10) || 0;
var gap = parseInt($('#gap').val(), 10) || 0;
$('#year12').val(!year ? '' : year + gap);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year10">
<option>select year</option>
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<input type="text" readonly="readonly" id="year12">

if you're ok with jquery... then
<select id="num1" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="num2" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="res">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<script>
function addThem(){
var num1 = $("#num1").val();
var num2 = $("#num2").val();
$("#res").val(Number(num1) +Number(num2));
}
</script>
this Plunker sample i did should help you out

function jsFunction(){
var myselect = document.getElementById("selectOpt");
$("#secondselectbox").val(myselect);
}
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondselectbox">
</select>
In this code After value selection you can do any new function(another select tag).

You will have to work on the specifics your self, but this should get you started.
let nextOption = {first: 1, seccond: 1}
function selected(selector, option) {
if (selector === 'first') {
nextOption.first = parseInt(option.value);
}
else if (selector === 'seccond') {
nextOption.seccond = parseInt(option.value);
}
let newOption = document.createElement("option");
newOption.text = nextOption.first + nextOption.seccond;
document.getElementById('final').add(newOption);
}
selected();
<select onClick="selected('first', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select onClick="selected('seccond', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="final">
</select>

Drop down changes automatically ( vise versa would be best )

I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>

Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>

jQuery calculation on drop down selection

I have a Product Selection, anyone can selection any product rate is in select value, then customer can choose no of year limit to 3 and then no of computer limit to 3.
Now if user select product 1 (Price 9.99) for 1 year and 1 pc then code is workinf fine, but I want to give 20% discount on any other changes like anyone select 2 year and 2 pc then (9.99*2*2) then a flat (assume) 20% discount.
<select name="dproduct" id="dproduct" required="required">
<option value="9.99">Product 1</option>
<option value="14.99">Product 2</option>
<option value="19.99">Product 3</option>
<option value="24.99">Product 4</option>
<option value="39.99">Product 5</option>
<option value="59.99">Product 6</option>
<option value="99.99">Product 7</option>
<option value="149.99">Product 8</option>
<option value="199.99">Product 9</option>
</select>
<select name="noofyear" id="noofyear" required="required">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="noofpc" id="noofpc" required="required">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
My jQuery Code:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#dproduct,#noofpc,#noofyear").blur(function () {
$('#price').val($('#noofpc').val() * $('#dproduct').val() * $('#noofyear').val());
});
});
</script>

$(document).ready(function(){
$("#dproduct,#noofpc,#noofyear").change(function() {
var product = parseFloat($('#dproduct').val());
var pc_count = parseInt($('#noofpc').val());
var year_count = parseInt($('#noofyear').val());
var price = product * pc_count * year_count;
if (pc_count > 1 || year_count > 1) {
price = price * 0.8;
}
$('#price').val(price);
});
});

logic required in javascript

i have a select option which works fine,but what i want is if more than one is selected then 10 % discount has to be added, how can this be done
and on selected the value multiplies in Java script
//javascript
function totprice(f,n,amt)
{
var tot=0;
document.getElementById('lbl_tot'+n).value=amt*f;
for (var k=1; k<=document.getElementById('rowcnt').value; k++)
{
if(document.getElementById('lbl_tot'+k))
{
tot=parseInt(tot) + parseInt(document.getElementById('lbl_tot'+k).value);
}
}
document.getElementById('txttot').value=tot;
document.getElementById('txttotprice').value=tot;
}
HTML
<select name="amt" id="amt" onchange="return totprice(this.value,2,110);">
<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>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>

Your select tag should be
<select name="amt" id="amt" onchange="return totprice(this.value,2,110);" multiple>
To make it multi select. Now when user will select multiple options (using Shift+click) then in your JavaScript function get these values and do the processing (provide discount/ any logic)
Updated
You wish to multiply the value the user has selected with the discount amount (110)
In your JS have this
var x = parseInt(f)*parseInt(amt);
If f = 2 and amt = 110 then x = 220. You need to do parseInt(value, radix) by default radix is 10
EXAMPLE:
var optionSelected = document.getElementById('amt').value; //optionSelected is nothing but this.value
if(optionSelected > 1)
{
//Offer discount
var x = parseInt(f)*parseInt(amt); //where f and amt is passed through function call
}
else
{
// Do nothing/ other logic
}
Hope this helps!!