Javascript code hide show price * quantity to show total - javascript

I have this problem with my code I cant make it to deliver me the answer I want. I want to select one of the options for the product and then one of the options for price then input the quantity and to have the Sub-Total delivered by the code.
The problem is that since I have different products and each product has 3 different prices I need my code to deliver the right answer.
The code I have right now is only taking the value of the first price of the first product, and I can't seem to make it work, I feel like I almost have the code... please help me :)
<div>Product<br />
<select id="producto1">
<option >Selecciona</option>
<option value="00">---ALARMAS---</option>
<option value="01">EXTREME BLACK</option>
<option value="02">EXTREME COBRA</option>
<option value="03">EXTREME GALACTIC</option>
</select></div>
<table>
<tbody>
<tr class="e01">
<td class="0"> </td>
<td class="01"><label>Price</label><br />
<select id="elias">
<option value="180">180</option>
<option value="200">200</option>
<option value="220">220</option>
</select></td>
<td class="02"><label>Price</label><br />
<select id="elias1">
<option value="50">50</option>
<option value="20">20</option>
<option value="22">22</option>
</select></td>
<td class="03"><label>Price</label><br />
<select id="elias2">
<option value="80">80</option>
<option value="100">100</option>
<option value="120">120</option>
</select></td>
</tr>
</tbody>
</table>
<div>
<label for="CAT_Custom_500436">Quantity</label><br />
<input type="text" maxlength="255" name="CAT_Custom_500436" id="CAT_Custom_500436" /></div>
<div><label for="CAT_Custom_500440">Sub-Total</label><br />
<input type="text" maxlength="255" name="CAT_Custom_500440" id="CAT_Custom_500440" /></div>
<br />
Java___
(function($) {
$("document").ready(function() {
$("td").hide();
$("#producto1").change(function() {
$(".e01 td").hide();
$("td." + $(this).val()).show();
});
});
})(jQuery);
var e = document.getElementById("elias");
var strUser = e.options[e.selectedIndex].value;
var e = document.getElementById("elias1");
var strUser1 = e.options[e.selectedIndex].value;
var e = document.getElementById("elias2");
var strUser2 = e.options[e.selectedIndex].value;
$(function () {
$('input').keyup(function (){
var quantity1 = $("#CAT_Custom_500436").val();
var total1 = quantity1 * strUser;
var total1 = quantity1 * strUser1;
var total1 = quantity1 * strUser2;
$("#CAT_Custom_500440").val(total1);
});
});

You can try something in these lines
$(document).ready(function () {
// Cache the variables
var $elias = $('#elias'),
$elias1 = $('#elias1'),
$elias2 = $('#elias2'),
$product = $('#producto1'),
$error = $('.error'),
$container = $('.container');
$("td").hide();
var productValue;
$product.change(function () {
$(".e01 td").hide();
$("td." + $(this).val()).show();
// Only show the container when the selections are not first 2
if (this.value !== 'Selecciona' && this.value !== '00') {
$error.addClass('hide');
$container.removeClass('hide');
} else {
$error.removeClass('hide');
$container.addClass('hide');
}
productValue = this.value;
}).change();
// Bind the change event for Dropdowns
var $quantity = $('#CAT_Custom_500436'),
$total = $("#CAT_Custom_500440");
$elias.add($elias1).add($elias2).change( findTotal);
$quantity.keyup(findTotal);
function findTotal() {
// Get the value
var quan = $quantity.val();
var pri = $('.'+ productValue).find('select').val();
var tot = pri * quan;
$total.val(tot);
}
});
Check Fiddle

Related

adding and removing text to a span populated from a dropdown

Here is my jsfiddle:
The end result I am wanting is that once you make a selection from each dropdown, the selection appears in the first line of text, and then get's reversed in the 2nd line of text. However, the apostrophe S needs to remain in the first spot. So for example, if you selected "Mother" from the first dropdown, and "Father" from the 2nd drop down, the two lines of text should look like this:
My Mother's Father
My Father's Mother
I don't know how to swap the apostrophe S so that it remains so that it comes first.
I tried using:
document.getElementById('third').innerHTML = strUser2 + "'s";
but that causes the apostrophe s to appear before I have anything selected.
That's because to run two functions before selecting. Remove them and try.
function functionOne() {
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').innerHTML = strUser;
document.getElementById('fourth').innerHTML = strUser.replace("'s", '');
}
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo() {
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').innerHTML = strUser;
document.getElementById('third').innerHTML = strUser2+ "'s";
}
document.getElementById("dropdown_2").onchange = functionTwo;
span#first,
span#second,
span#third,
span#fourth {
min-width: 40px;
display: inline-block;
border-bottom: solid 1px;
height: 18px;
vertical-align: bottom;
}
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="">- Select -</option>
<option value="Father's">Father's</option>
<option value="Mother's">Mother's</option>
<option value="Sister's">Sister's</option>
<option value="Brother's">Brother's</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
I would change the values in the option tags, but keep the display the same. Ex: <option value="Father">Father's</option>
Then append 's after the values you want to have 's.
Also don't execute each function by default, only execute them onchange. That way you'll never get something like 's when the page loads.
I would then make sure - Select - is the first option (selected) for both option tags, but make them disabled so the user cannot choose those as options.
--note--
I would strongly recommend using textContent as supposed to innerHTML to avoid possible code injection, depending on what you're using this for.
function functionOne(){
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').textContent = strUser + "'s";
document.getElementById('fourth').textContent = strUser;
}
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').textContent = strUser;
document.getElementById('third').textContent = strUser2 + "'s";
}
document.getElementById("dropdown_2").onchange = functionTwo;
span#first, span#second, span#third, span#fourth{
min-width:40px;
display:inline-block;
border-bottom:solid 1px;
height:18px;
vertical-align:bottom;
}
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="" disabled selected>- Select -</option>
<option value="Father">Father's</option>
<option value="Mother">Mother's</option>
<option value="Sister">Sister's</option>
<option value="Brother">Brother's</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="" disabled selected>- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
Simple solution:
Remove the apostrophe's from the list values and add on the string only if defined:
document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
Fiddle here
EDIT - New solution:
Full code solution keeping the 2 lines from populating until both dropdowns are selected, as requested:
var firstSelect = false;
var secondSelect = false;
var dd1 = document.getElementById("dropdown_1");
var dd2 = document.getElementById("dropdown_2");
function clearAllContainers(){
document.getElementById('first').innerHTML = '';
document.getElementById('second').innerHTML = '';
document.getElementById('third').innerHTML = '';
document.getElementById('fourth').innerHTML = '';
}
function updateAllContainers(){
var strUser = dd1.options[dd1.selectedIndex].value;
document.getElementById('first').innerHTML = strUser+(strUser ? "'s" : "");
document.getElementById('fourth').innerHTML = strUser;
var strUser2 = dd2.options[dd2.selectedIndex].value;
document.getElementById('second').innerHTML = strUser2;
document.getElementById('third').innerHTML = strUser2+(strUser2 ? "'s" : "");
}
function functionOne(){
if(dd1.options[dd1.selectedIndex].value){
firstSelect = true;
}else{
firstSelect = false;
}
if(secondSelect && dd1.options[dd1.selectedIndex].value != ''){
updateAllContainers();
}else{
clearAllContainers();
}
}
functionOne()
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
if(dd2.options[dd2.selectedIndex].value){
secondSelect = true;
}else{
secondSelect = false;
}
if(firstSelect && dd2.options[dd2.selectedIndex].value != ''){
updateAllContainers();
}else{
clearAllContainers();
}
}
functionTwo()
document.getElementById("dropdown_2").onchange = functionTwo;
<select class="text_select" id="dropdown_1" name="dropdown_1">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<select class="text_select" id="dropdown_2" name="dropdown_2">
<option value="">- Select -</option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Sister">Sister</option>
<option value="Brother">Brother</option>
</select>
<br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>
Updated fiddle for final solution is here.
I looked at your Javascript file on JSFiddle. The solution is very simple. First you'll have to remove apostrophe s from the content of <span id="fourth"></span>
You can do that easily by slicing off last two characters from the content of that span. Here is how you need to do it.
document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
Now, the next part is to add apostrophe s in the content of <span id="third"></span>.
But you'll have to make sure that if the content of the span is empty then it should not append apostrophe s.
For that you can check whether on not the content is empty and if not empty then you can append apostrophe s.
Here is how you can do it.
document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
Here is the overall modified code of your Javascript file.
function functionOne(){
var e = document.getElementById("dropdown_1");
var strUser = e.options[e.selectedIndex].value;
document.getElementById('first').innerHTML = strUser;
document.getElementById('fourth').innerHTML = strUser.slice(0, strUser.length - 2);
}
functionOne();
document.getElementById("dropdown_1").onchange = functionOne;
function functionTwo(){
var e = document.getElementById("dropdown_2");
var strUser = e.options[e.selectedIndex].value;
//var strUser2 = e.options[e.selectedIndex].value;
document.getElementById('second').innerHTML = strUser;
document.getElementById('third').innerHTML = (strUser)? strUser + '\'s':strUser;
}
functionTwo()
document.getElementById("dropdown_2").onchange = functionTwo;

How to associate two inputs in JavaScript?

I have this code:
$(document).ready(function(){
$('.container select').each(function(){
$(this).on('change', function(){
var selectedVal = $(this).val();
//console.log(selectedVal);
});
});
$('input').on('change', function () {
var sum = 0;
$('input').each(function() {
sum += Number($(this).val());
});
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total'>
Total nr: <span>5(2 A1, 3 A2)</span>
</div>
</div>
Is it possible that on change of the select and the input of type number to modify the total number like in the code above using JavaScript/jQuery?
Can anyone help me with this please.
On every change on the inputs or select fields I need to calculate total number of A1 and total number of A2. Hope this make sense. And display them beside the total number.
JSFiddle
We can't give you the full code but I tried to provide some logic for what you want.I think you want some thing like this:
//create a json to collect the sum of numbers
var number = {
a1: 0,
a2: 0,
a1_count:0,
a2_count:0
};
//check in select change
$(".select").change(function() {
//flush previous calculation before using again
number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0;
//check all the select value and get the corresponding input value
$(".select").each(function() {
var valueType = $(this).val();
if (valueType == "a1") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
} else if (valueType == "a2") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
}
});
$("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total' id="total">
</div>
</div>
This will work for any arbitrary list in the select.
function change() {
var res = {}, fulls = $('.container .full');
fulls.each(function(index){
var selected = $(this).find('select > option:selected').text();
if (! res[selected]) res[selected] = 0;
res[selected] += 1*$(this).find('input[type="number"]').val();
});
var detail = "", total = 0;
for(prop in res) {
if (res.hasOwnProperty(prop)) {
try {
var val = 1*res[prop];
detail += ", "+val+" "+prop;
total += val;
}catch(e){}
}
}
$('.total > span').text(""+total+" ("+detail.substr(2)+")");
}
$().add('.container .full input[type="number"]')
.add('.container .full select[name^="select"]')
.on('change', change);

Get Multiple dropdowns value of a form and send as a query string in jquery

I have a form that have dropdowns that have multiple properties .Now on click of button i want to create array of values on the key name as the dropdown name.But i am unable to do this.
And i have to send the data of each dropdown in a query string with ajax
HTML
<select multiple="" style="width: 147px;" id="list" name="list" class ="list_class">
<option value="21">A</option>
<option value="22">B</option>
<option value="23">C</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list1" name="list1" class ="list_class">
<option value="22">B</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list2" name="list2" class ="list_class">
<option value="22">B</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
On button Click i am doing this to get the values :
$('form#add').find('select, input:text').each(function() {
var inputName = $(this).attr("name");
var inputValue = $(this).val();
formData +='&'+inputName+'='+inputValue;
});
I want the values in the formdata as :
list = ['21','22','23','24','2']
list1 = ['23','24','2']
list2 = ['22','24','2']
I create an object(objVal) and using .map() combine with .get() add an array with the selected values to that object(object key is the name of each select):
$('#add').on("click", function() {
var objVal = {};
$('select').each(function() {
var arr = $(':selected', this).map(function() {
return this.value;
}).get();
objVal[$(this).attr("name")] = arr;
});
console.log(objVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
<option value="21">A</option>
<option value="22">B</option>
<option value="23">C</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list1" name="list1" class="list_class">
<option value="22">B</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list2" name="list2" class="list_class">
<option value="22">B</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
<input type='button' id='add' />
Result of this example is:
$('form#add').find('select').each(function() {
var that = $(this);
var list = [];
that.find('option').each(function() {
var val = $(this).attr('value');
list.push(val);
});
return list;
});
var result = {};
$("select option").each(function(){
var list = $(this).parent().attr("name");
if(list in result){
result[list].push($(this).val());
}else{
result[list] = [].push($(this).val());
}
});
console.dir(result);
how about this
var list1 = [], list2 = [], list3 = [];
var $list1 = $("#list1").find("option");
$list1.each(function () {
var $option = $(this).attr("value");
list1.push($option);
});
var $list2 = $("#list2").find("option");
$list2.each(function () {
var $option = $(this).attr("value");
list2.push($option);
});
var $list3 = $("#list3").find("option");
$list3.each(function () {
var $option = $(this).attr("value");
list3.push($option);
});
console.log(list1);
console.log(list2);
console.log(list3);
jsfiddle
try
var ar = [];
$("select.list_class").each(function () {
var obj = {};
obj[$(this).attr("name")] = $(this).children().map(function () {
return this.value;
}).get();
ar.push(obj);
});
console.log(ar);
DEMO

dropbox onchange with jquery-ui

I'm trying to get a onselect and then javascript function but it doesn't work.
It only works when I take away jquery-ui script, but then I get ugly forms.
<select id="productkleur" style="width: 200px;" onchange="productkleurchange()" data-theme="c" data-native-menu="true">
<option value="1" id="1">Zwart</option>
<option value="2" id="2">Rood</option>
<option value="3" id="3">Groen</option>
<option value="4" id="4">Paars</option>
<option value="5" id="5">Blauw</option>
<option value="6" id="6">Geel</option>
</select>
I tried this:
$("#productkleur").combobox({
select: function (event, ui) {
alert("the select event has fired!");
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change "+kleur+" to "+productid+" stock "+voorraad);
}
}
);
I tried this
function productkleurchange() {
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change "+kleur+" to "+productid+" stock "+voorraad);
};
The last one works fine when I remove jquery-ui, but when I don't nothing happens.
Anyone knows why or how to fix this?
Try the working code using jquery
$( "#productkleur" ).change(function() {
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change "+kleur+" to "+productid+" stock "+voorraad);
});
Remove onchange="productkleurchange()" from the HTML before trying with the above code.
Just remove onChange event in `select' it should work.
<select id="productkleur" style="width: 200px;" data-theme="c" data-native-menu="true">
<option value="1" id="1">Zwart</option>
<option value="2" id="2">Rood</option>
<option value="3" id="3">Groen</option>
<option value="4" id="4">Paars</option>
<option value="5" id="5">Blauw</option>
<option value="6" id="6">Geel</option>
</select>
Demo
Also try this,
$('#productkleur').on('change', function() {
var productid = $("#productid").val();
var kleur = $("#productkleur").val();
var voorraad = $("#productcolourstock").val();
var what = "add";
console.log("change " + kleur + " to " + productid + " stock " + voorraad);
});

Calculate total price script not working

I want to calculate the total price and display the subtotal at the bottom of the form, but it's not working and I don't know why.
The subtotal should be showing the total price after substraction or addition of the elements "prijsvolwassenen", "prijskinderen", "prijspeuters" and "prijskamertype"
FIDDLE HERE
this is my script
$(document).ready(function calculatePrice(formclear) {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//calculate total value
var total = volwassenen+kinderen+peuters+kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value=total;
}
}
And here is the HTML:
<form name="formclear" action="" method="post" id="bootstrap-frm">
<label>
<span>Volwassenen :</span>
<select class="autowidthselect" name="prijsvolwassenen" onChange="calculatePrice()" id="prijsvolwassenen">
<option value="-50">1</option>
<option selected="selected" value="0">2</option>
<option value="50">3</option>
<option value="100">4</option>
<option value="150">5</option>
<option value="200">6</option>
<option value="250">7</option>
<option value="300">8</option>
</select>
</label>
<label>
<span>Kinderen (4-12 jr) :</span>
<select class="autowidthselect" name="prijskinderen" onChange="calculatePrice()" id="prijskinderen">
<option value="-50">0</option>
<option value="-25">1</option>
<option selected="selected" value="0">2</option>
<option value="25">3</option>
<option value="50">4</option>
<option value="75">5</option>
<option value="100">6</option>
<option value="125">7</option>
</select>
</label>
<label>
<span>Kinderen (0-3 jr) :</span>
<select class="autowidthselect" name="prijspeuters" onChange="calculatePrice()" id="prijspeuters">
<option selected="selected" value="0">0</option>
<option value="15">1</option>
<option value="30">2</option>
<option value="45">3</option>
<option value="60">4</option>
<option value="75">5</option>
<option value="90">6</option>
<option value="105">7</option>
</select>
</label>
<label>
<span> Kamertype :</span>
<select class="autowidthselect" name="prijskamertype" onChange="calculatePrice()" id="prijskamertype">
<option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
<option value="295">Kraaiennest</option>
<option value="395">Kajuit</option>
<option value="495">Kapiteinshut</option>
</select>
</label>
<label>
<button type="button" onclick="calculatePrice()">Calculate</button>
</label>
<label>
<span>Subtotaal: </span>
<input id="PicExtPrice" type="text" size="10"/>
</label>
</form>
You are actually mixing up things there. You tried to use document ready that's part of the jQuery library (which you're not loading nor using anywhere in your code), when actually you just needed to declare a function.
This script should work for you:
<head>
<script type="text/javascript">
function calculatePrice() {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//calculate total value
var total = volwassenen + kinderen + peuters + kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;
}
</script>
</head>
Demo
Your problem is a simple syntax error.
At the end of your code, you have
}
}
The first } closes the function, but the second } is causing an error. Try replacing it with a ) to close the ready function.
Also, I noticed that you didn't reference jQuery, so that is also causing an error. In the left, change the text-box that says "No-Library (pure JS)" to a version of jQuery.
You should make more use of jQuery when referencing it (which you forgot to do in your fiddle by the way). What I think you want to achieve is something like this:
FIDDLE
HTML
<form name="formclear" action="" method="post" id="bootstrap-frm">
<label> <span>Volwassenen :</span>
<select class="autowidthselect" name="prijsvolwassenen" id="prijsvolwassenen">
<option value="-50">1</option>
<option selected="selected" value="0">2</option>
<option value="50">3</option>
<option value="100">4</option>
<option value="150">5</option>
<option value="200">6</option>
<option value="250">7</option>
<option value="300">8</option>
</select>
</label>
<label> <span>Kinderen (4-12 jr) :</span>
<select class="autowidthselect" name="prijskinderen" id="prijskinderen">
<option value="-50">0</option>
<option value="-25">1</option>
<option selected="selected" value="0">2</option>
<option value="25">3</option>
<option value="50">4</option>
<option value="75">5</option>
<option value="100">6</option>
<option value="125">7</option>
</select>
</label>
<label> <span>Kinderen (0-3 jr) :</span>
<select class="autowidthselect" name="prijspeuters" id="prijspeuters">
<option selected="selected" value="0">0</option>
<option value="15">1</option>
<option value="30">2</option>
<option value="45">3</option>
<option value="60">4</option>
<option value="75">5</option>
<option value="90">6</option>
<option value="105">7</option>
</select>
</label>
<label> <span> Kamertype :</span>
<select class="autowidthselect" name="prijskamertype" id="prijskamertype">
<option selected="selected" value="selecteer kamertype">Selecteer kamertype</option>
<option value="295">Kraaiennest</option>
<option value="395">Kajuit</option>
<option value="495">Kapiteinshut</option>
</select>
</label>
<label> <span>Subtotaal: </span>
<input id="PicExtPrice" type="text" size="10" />
</label>
</form>
JS
$(document).ready(function () {
$("select").on("change", function () {
CalculatePrice();
});
$("#CalculatePrice").on("click", function () {
CalculatePrice();
});
});
function CalculatePrice()
{
var pv = parseInt($("#prijsvolwassenen").val(), 10);
var pk = parseInt($("#prijskinderen").val(), 10);
var pp = parseInt($("#prijspeuters").val(), 10);
var pkt = parseInt($("#prijskamertype").val(), 10);
if (!isNaN(pkt))
$("#PicExtPrice").val(pv+pk+pp+pkt);
}
EDIT: Updated answer using vanilla JS:
Make your JS like this:
JS
function calculatePrice() {
//Get selected data
var elt = document.getElementById("prijsvolwassenen");
var volwassenen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskinderen");
var kinderen = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijspeuters");
var peuters = elt.options[elt.selectedIndex].value;
var elt = document.getElementById("prijskamertype");
var kamertype = elt.options[elt.selectedIndex].value;
//convert data to integers
volwassenen = parseInt(volwassenen);
kinderen = parseInt(kinderen);
peuters = parseInt(peuters);
kamertype = parseInt(kamertype);
//check if each value is a number and calculate total value
if (!isNaN(volwassenen) && !isNaN(kinderen) && !isNaN(peuters) && !isNaN(kamertype)) {
var total = volwassenen + kinderen + peuters + kamertype;
//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;
}
}
VANILLA FIDDLE
More DRY code http://jsfiddle.net/B6mPP/6/
$(function(){
var fields = $('#prijsvolwassenen,#prijskinderen,#prijspeuters,#prijskamertype'),
total = $('#PicExtPrice');
function calculateTotal(){
var sum = 0;
fields.each(function(){
var value = parseInt($(this).val());
value == value && (sum += value);
})
total.val(sum);
};
fields.change(calculateTotal);
$('#calculate').click(calculateTotal);
});
demo: https://so.lucafilosofi.com/calculate-total-price-script-not-working/
$(function(){
$('.autowidthselect').on('change', function(){
calculatePrice();
});
$('button').on('click', function(){
calculatePrice();
return false;
});
function calculatePrice() {
var total = 0;
$('.autowidthselect').each(function(){
total += !isNaN(this.value) ? parseInt(this.value) : 0;
});
$("#PicExtPrice").val(total);
}
});
vanila javascript fix
http://jsfiddle.net/B6mPP/10/

Categories