Dynamic updating of prices with multiple options

Dynamic updating of prices with multiple options - javascript

script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
document.getElementById("price").innerHTML="<p>PRICE: " + price + "</p>";
}
</script>
</head>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="€20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="€25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="€28.00">Gildan Cotton (€28.00)</option>
<option id="organic" value="€30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None">Choose Size</option>
<option id="Small">Small</option>
<option id="Medium">Medium</option>
<option id ="Large">Large</option>
<option id ="XL">XL</option>
<option id ="XXL"value= "€2.00">XXL</option>
<option id ="XXXL" value="€3.00">XXXL</option>
</select>
I have a site which sells t-shirts, The code above allows the price to update depending on the type of cotton selected and that works fine. I want the XXL and XXXL size shirts to cost more and for that charge to be updated in the price. How do I add the values of elements together to display one price, Thanks.

the correct code would be
<script type="text/javascript">
function updatePrice() {
var price = document.getElementById("product").value;
var size_price = document.getElementById("size").value;
var a=parseInt(price);//parsed type price
var b=parseInt(size_price);//parsed size price
if(size_price != "null")//if the value selected is not null then add the prize
{
var fin_price = a+b; //add the prices
}
else //if the value selected is null then fin_prize=price
{
var fin_price = price;
}
document.getElementById("price").innerHTML="<p>PRICE: " + fin_price + "</p>";
}
</script>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="28.00">Gildan Cotton (€28.00)</option>
<option id="organic" value="30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None" value="null">Choose Size</option>
<option id="Small" value="0.00">Small</option>
<option id="Medium" value="0.00">Medium</option>
<option id ="Large" value="0.00">Large</option>
<option id ="XL" value="0.00">XL</option>
<option id ="XXL"value= "2.00">XXL</option>
<option id ="XXXL" value="3.00">XXXL</option>
</select>
Note:if you want to add numbers from different value attributes then numbers with letters (ie. €20.00) is discouraged.also use the value attribute with all options of a select dropdown

Separate the formatting from the value. Use float to preserve low order positions in case you ever want to use fractional prices. Test with gildan and XXL.
(update with correction - price.toFixed(2))
Working example here
<script type="text/javascript">
function updatePrice() {
var discount = '.10';
var discountFactor = 1.0-parseFloat(discount)
var price = (parseFloat(document.getElementById("product").value) + parseFloat(document.getElementById("size").value))*discountFactor;
document.getElementById("price").innerHTML="<p>PRICE: €" + price.toFixed(2) + "</p>";
}
</script>
</head>
<br>
<label >Shirt Type</label>
<body onload="updatePrice()">
<select id="product" onchange="updatePrice()">
<option id="basic" value="20.00"> Basic Shirt (€20.00)</option>
<option id="poly" value="25.00">Poly-Cotton Blend (€25.00)</option>
<option id="gildan" value="28.30">Gildan Cotton (€28.30)</option>
<option id="organic" value="30.00">Organic Cotton (€30.00)</option>
</select>
<div id="price"><p>PRICE: €XX.XX</p></div>
<label >Shirt Size</label>
<select id="size" onchange="updatePrice()">
<option id="None" value= "0.00">Choose Size</option>
<option id="Small" value= "0.00">Small</option>
<option id="Medium" value= "0.00">Medium</option>
<option id ="Large" value= "0.00">Large</option>
<option id ="XL" value= "0.00">XL</option>
<option id ="XXL" value= "2.25">XXL</option>
<option id ="XXXL" value="3.00">XXXL</option>
</select>

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>

Make 2 <select> statements work and dont crash the script

Im putting multiples select in my code that are hidden and got a principal select that makes visible the other selec depending in the value selected, but when you choose a value in the second select it changes the second visible select to another, how can I prevent that to happen
Its a catalog in a static html that interacts with a SQL Server via php, so I need the select to compare it with the ID´s and make inserts and updates
This is the script:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
function myFuction(){
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
document.getElementById("valorsel").value = selValue;
}
</script>
And this are the examples:
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada>
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3</option>
</select>
I want to be able of having both select on screen to insert or update the information

Instead of having $("select").change(function(){, it's better that you have $("#MENU").change(function() { because otherwise it will detect all the select menus that are changing instead of just the first one like you want.
$(document).ready(function() {
$("#MENU").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
function myFuction() {
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
//document.getElementById("valorsel").value = selValue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada">
<option value=" " selected></option>
<option value="1 ">AREA 1</option>
<option value="2 ">AREA 2</option>
<option value="3 ">AREA 3</option>
</select>

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

Set price using selection from dropdown menu

How can I set the price of items using dropdown menu lets say I have a dropdown menu with cars and trucks and depending on what the user picks the prices will vary how can I set the price of each one and update a box containing the price of each item.
<p><b>Truck: </b><select id="states" name="states" size="1">
<option>Please Choose</option>
<option value="F150">F150</option>
<option value="Ram1500">Ram1500</option>
<option value="chevy">chevy</option>
</select><br /></p><p><b>sports car: </b><select id="states" name="states" size="1">
<option>Please Choose</option>
<option value="mustang">mustang</option>
<option value="charger">charger</option>
<option value="camaro">camaro</option>
</select><br /></p>

Add extra attribute for price uzing data-* attributes, then on change get the value of this attribute and show it in the price field :
$('body').on('change', '#trucks', function(){
var selected_truck_price = $('option:selected', this).data('price');
$('#price').val(selected_truck_price);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<b>Truck: </b>
<select id="trucks" name="trucks" size="1">
<option>Please Choose</option>
<option data-price="150" value="F150">F150</option>
<option data-price="1500" value="Ram1500">Ram1500</option>
<option data-price="2000" value="chevy">chevy</option>
</select>
<br/>
</p>
Price : <input name='price' id='price'/>
Hope this helps.

Finding out if a form element is of type select using its name attribute

<FORM NAME="form1" METHOD="POST" ACTION="survey.php">
<p>q2: Who is your best best friend?</P>
<select name='q2' id='q21'>
<option value='0'>Select a Name</option>
<option value='2001'>Ahmed Ebaid</option>
<option value='2002'>Jaida ElTayeby</option>
<option value='2003'>Farida Ebaid</option>
<option value='2005'>Kenny Andersen</option>
<option value='2006'>Nadine Saad</option>
<option value='2007'>AbdElHai Ebaid</option>
<option value='2008'>Salwa AbdElAal</option>
</select>
<select name='q2' id='q22'>
<option value='0'>Select a Name</option>
<option value='2001'>Ahmed Ebaid</option>
<option value='2002'>Jaida ElTayeby</option>
<option value='2003'>Farida Ebaid</option>
<option value='2005'>Kenny Andersen</option>
<option value='2006'>Nadine Saad</option>
<option value='2007'>AbdElHai Ebaid</option>
<option value='2008'>Salwa AbdElAal</option>
</select>
<P>q3: How do you rate AbdElHai Ebaid?</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='1' >1</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='2' >2</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='3' >3</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='4' >4</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='5' >5</P><span style='color:red' id='radio_error'></span>
<p>q4: Who is your best best friend?</P>
<select name='q4' id='q41'>
<option value='0'>Select a Name</option>
<option value='2001'>Ahmed Ebaid</option>
<option value='2002'>Jaida ElTayeby</option>
<option value='2003'>Farida Ebaid</option>
<option value='2005'>Kenny Andersen</option>
<option value='2006'>Nadine Saad</option>
<option value='2007'>AbdElHai Ebaid</option>
<option value='2008'>Salwa AbdElAal</option>
</select>
<select name='q4' id='q42'>
<option value='0'>Select a Name</option>
<option value='2001'>Ahmed Ebaid</option>
<option value='2002'>Jaida ElTayeby</option>
<option value='2003'>Farida Ebaid</option>
<option value='2005'>Kenny Andersen</option>
<option value='2006'>Nadine Saad</option>
<option value='2007'>AbdElHai Ebaid</option>
<option value='2008'>Salwa AbdElAal</option>
</select>
<p>
<INPUT TYPE="Submit" Name="Submit1" VALUE="Click here to vote">
</P>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
if ($('#'+qNum+'').is(':radio')) {
if (($('input[name='+qNum+']:checked').length == 0) ){
alert("No Selection is made for "+ qNum);
return false;
}
}
else if ($('[name="' + qNum + '"]').is(':radio')) {
var j = 1;
var nominatefriend = qNum+j;
alert (nominatefriend);
}
</script
What I'm trying to do here is to validate the form elements based on their types, for the javascript code, this is already included into a for loop that goes through all questions. I don't know the right syntax of checking whether a form element is a select or not based on the name attribute. qNum at my case is a variable that takes values such as q1, q2,.....
The alert(nominatefriend) never gets executed

I believe the correct syntax is:
$('[name="' + qNum + '"]').is('select')
without the :

You can achieve this in various ways,
var element = $('#'+qNum);
You can do it using jQuery:
if (element.is('input')) {
// do this
} else if (element.is('select')) {
// do this
}
OR
if (element.tagName == "INPUT") {
// do this
} else if (element.tagName == "SELECT") {
// do this
}
OR
if(element.prop('type') == 'select-one' ) {
// do this
}

Develop Reference

JavaScript is the programming language of the Web.

Dynamic updating of prices with multiple options - javascript

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

Make 2 <select> statements work and dont crash the script

Connecting two Combo-boxes with html and js

Set price using selection from dropdown menu

Finding out if a form element is of type select using its name attribute

Categories

Resources