Calculate price with amount of quantity

Calculate price with amount of quantity - javascript

I have a web page for employees where they can choose an item from a dropdown and it will automatically input the price of that item for them. Here is my code:
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_value').val($selection.val());
$('#opt_price').val($selection.data('price'));
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input">
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>
The code works properly, but how would I be able to add a quantity input that defaults to 1 and when it is changed to two, the price doubles, and when it is changed to three the price triples in the "Option Price" input for example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_value').val($selection.val());
$('#opt_price').val($selection.data('price'));
$('#quantity_input').on('change', function() {
$('#opt_price').val($selection.data('price') * $(this).val());
});
});
});
</script>
<select id="price_input">
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>
Calculation works on change, as for default values and monitoring both you can figure that part out. on change for the quantity dropdown functions so that should get you started.

var select = $("#opt");
var price = $("input#opt_price");
var quantity = $("input#opt_quantity");
var onChangeSelect = function() {
price.val(select.children(":selected").data('price'));
quantity.val(1);
}
select.on('change', onChangeSelect);
quantity.on('change', function() {
price.val(select.children(':selected').data('price') * $(this).val());
});
onChangeSelect();
updated

Related

How to change the name of a select tag attribute with jquery

First of all,
when I select a value from select tag. Change the input value of the checkbox.
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
});
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
How can I change the name of cat-2 to the chosen value of cat-1
For example;
if I choose value1 ( its value=100)
I want to change the name of cat-2 to cat-100
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>

Just continue my script from your other question
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
const sel2 = document.getElementById("myselectbox2");
if (sel2 && this.value) sel2.name="c-"+this.value;
});
// check to see the change
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
// select to see the change
document.getElementById("myselectbox2").addEventListener("change", function() {
console.log(this.name,this.value)
})
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>

How to select a dropdown item from other dropdown using javaScript?

I have two dropdown lists of states . In both dropdown items there is two state Alaska and California. If I select any item from dropdown list one then I hit the radio button so the other dropdown must have same selection. Can anyone help me please? Thanks
<form>
<select id="state1" name="state1">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<select id="state2" name="state2">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<input type="radio" id="yes" name="yesNo" onclick="yesnoCheck()" value="yes" />
</form>
JavaScript Code
<script>
var state= document.getElementById("state");
var selectedText = state.options[state.selectedIndex].text;
var state1= document.getElementById("state1");
var selectedText1 = state.options[state.selectedIndex].text;
selectedText1 =selectedText;
</script>

You can simply do this by assigning the value of the first select to the second when the radio button is clicked.
var stateSelect1 = document.getElementById("state1");
var stateOption1 = document.getElementById("yes");
var stateSelect2 = document.getElementById("state2");
stateOption1.onclick = function(){
stateSelect2.value = stateSelect1.value
}
<form>
<select id="state1" name="state1">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<select id="state2" name="state2">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<input type="radio" id="yes" name="yesNo" value="yes" />
</form>

If you check the box the value will be set to the value in the first select.
In your backend you have to change yes or no to true or false.
<form>
<select id="state1" name="state1">
<option value="Alaska">Alaska</option>
<option value="California">California</option>
</select>
<select id="state2" name="state2">
<option id="state2_Alaska" value="Alaska">Alaska</option>
<option id="state2_California" value="California">California</option>
</select>
<input id="radioCheck" type="checkbox" name="yesNo" />
</form>
<script>
document.querySelector("#radioCheck").addEventListener("change", function() {
if(document.querySelector("#radioCheck").value == true){
var state = document.querySelector("#state1").value;
document.querySelector("#state2_" + state).setAttribute("selected", true);
}
});
</script>

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>

Calculating price of multiple items

Currently I have a HTML form allows a person to select an item from a dropdown and it will put the price in an input and even change the price if the quantity is changed.
How can I make it so that when I add "multiple" inside the select tag (making it <select id="price_input" multiple>), it will calculate the price for the two or more items and if two or more are selected have the quantity dropdown disabled?
This is what I've been able to come up with but it doesn't have the additions described above that I am in need of:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_price').val($selection.data('price'));
$('#quantity_input').on('change', function() {
$('#opt_price').val($selection.data('price') * $(this).val());
});
});
});
</script>
<select id="price_input">
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>

Using the following you can make it work for multiple products.
$(document).ready(function() {
$('#price_input').on('change', function() {
$('#opt_price').val(valueFUnction());
});
$('#quantity_input').on('change', function() {
$('#opt_price').val(valueFUnction());
});
});
function valueFUnction(quan) {
var $selection = $('#price_input').find(':selected');
var quantity = $('#quantity_input').val();
var total = 0;
$selection.each(function() {
total += $(this).data('price') * quantity;
})
return total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input" multiple>
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>Option Price
<input type="text" id="opt_price" />
</div>

You can check if more then one option is selected with $(":selected", this).length > 1) and then change disabled of $('#quantity_input')
$('select').on('change', function() {
if ($(":selected", this).length > 1) {
$('#quantity_input').prop('disabled', true);
} else {
$('#quantity_input').prop('disabled', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price_input" multiple>
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>Option Price
<input type="text" id="opt_price" />
</div>

Try the following optimized version:
$('#price_input').on('change', function() {
var items = $(this).val() || [], totalPrice = 0.00;
$('#quantity_input').attr('disabled', items.length > 1);
var selection = $(':selected', this);
if (selection.length) {
$.each(selection, function(i, v){
totalPrice += parseFloat($(v).data('price'));
});
}
$('#opt_price').val(totalPrice);
});
$('#quantity_input').on('change', function() {
$('#opt_price').val($('#price_input :selected').data('price') * $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="price_input" multiple>
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>Option Price <input type="text" id="opt_price"/></div>

javascript to update price of 4 dropdown & 2 check box button.

The above code is not working the way I want. The user should be able to select one option from each drop down menu & as soon as he selects a option price should be updated (at this point an alert box will do). User should be able to re-select any drop down menu if he/she wants and proper calculations needs to be done accordingly.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css">
<script type="text/javascript">
function dropdown() {
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
function Add() {
var e = document.getElementById('numberlist');
var txt = e.options[e.selectedIndex].text;
var txt_int = parseInt(txt);
var final_txt = show(txt_int);
//return final_txt;
//alert(txt_int);
}
function show(price) {
if(document.my_form.but1.checked == true) {
//alert("Box1 is checked");
price += 10;
}
else if(document.my_form.but2.checked == true) {
//alert("Box 2 is checked");
price += 15;
}
//return price;
alert(price);
}
</script>
</head>
<body onload="dropdown();">
<form name="my_form">
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<br /> <p>
<input type="checkbox" name=but1 onchange="show()"> Gift Wrap $10 <br />
<input type="checkbox" name=but2 onchange="show()"> Express Shipping $15<br /> <p>
</form>
</body>
</html>

There are a couple of issues I see right of the bat.
Your select elements all have the same id attribute. This is a definite no-no. The use of document.getElementById() will only return one element.
If you want to get a handle on all of the select fields in your Add() and dropdown() functions, you should use the name attribute instead of the id attribute and query for these elements with document.getElementsByName(nameValue). This will return an array of all of your select elements which you would want to iterate over with a for loop.
The other issue is with your show() function. You have the parameter "price" defined in the function, buy you are not calling the function with a "price" argument. You can define a global price variable that will be accessible by all the functions with the window.
//Define a global price variable that will be visible to every function
var price;
//Add extra option to 'numberlist' select elements
function initDropdownOptions() {
//Grab all select elements by their name attribute
var selectElements = document.getElementsByName("numberlist");
//Initialize/Define for loop conditions variables
var numberOfDropdowns = selectElements.length;
var i;
//Define a reusable temp option variable to be reused
var optn;
//Iterate over select elements
for( i = 0; i < numberOfDropdowns; i++ ){
//Create a new option element and save it to the optn variable
optn = document.createElement("OPTION");
//Set the text of the option
optn.text="3";
//Set the value of the option
optn.value="3";
//Add the option to the ith select element
selectElements[i].add( optn );
}
}
function calculatePrice() {
//Grab all select elements by their name attribute
var selectElements = document.getElementsByName("numberlist");
//Initilize/Define for loop conditions variables
var i;
var numberOfDropdowns = selectElements.length;
//Define a temp holder for the select values
var tmpSelectValue;
//Initialize the global price variable to 0
price = 0;
for( i = 0; i < numberOfDropdowns; i++ ){
//Extract the value from the select element
tmpSelectValue = selectElements[i].options[ selectElements[i].selectedIndex ].value
//Parse the tmpSelectValue into a number and add it to the global price
price += parseFloat( tmpSelectValue );
}
//Add additional Charges if they are applicable
var giftWrapChecked = (document.my_form.but1.checked == true);
var expressShippingChecked = (document.my_form.but2.checked == true);
if( giftWrapChecked ) {
//Add aditional 10$
price += 10;
}
if( expressShippingChecked ) {
//Add additional 15$
price += 15;
}
//Output the price to the currentPrice div
document.getElementById("currentPrice").innerHTML = price;
}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css">
</head>
<body onload="initDropdownOptions();">
<form name="my_form">
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<br />
<p>
<input type="checkbox" name=but1 onchange="calculatePrice()"> Gift Wrap $10 <br />
<input type="checkbox" name=but2 onchange="calculatePrice()"> Express Shipping $15<br />
<p>
<div id='currentPrice'></div>
</form>
</body>
</html>

This can be easily done using jQuery:
Try it:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css" />
</head>
<body>
<form name="my_form">
<select id="numberlist1" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist2" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist3" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist4" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<br />
<p>
<input type="checkbox" name="but1" value="10" />
Gift Wrap $10 <br />
<input type="checkbox" name="but2" value="15" />
Express Shipping $15<br />
<p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('input:checkbox, select.dropdown').change(function(){
var price = 0;
$('input:checkbox, select.dropdown').each(function(){
// Your Show function
if($(this).is('input:checkbox') )
{
if($(this).is(':checked'))
price += parseInt($(this).val());
}
else
price += parseInt($(this).val());
});
alert(price);
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Calculate price with amount of quantity - javascript

Related

How to change the name of a select tag attribute with jquery

How to select a dropdown item from other dropdown using javaScript?

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

Calculating price of multiple items

javascript to update price of 4 dropdown & 2 check box button.

Categories

Resources