Updating Total cost with Multiple drop down lists

Updating Total cost with Multiple drop down lists - javascript

I would like to make the total update depending on the amount of tickets that have been selected
I cant get the price to update with the different selections.For example, if someone were to choose "2" seats and then "3" seats on the other types of tickets i would like the price to all update
var seat_prices = new Array();
seat_prices["None"] = 0;
seat_prices["seats-STA"] = 19.80;
seat_prices["seats-STP"] = 17.50;
seat_prices["seats-STC"] = 15.30;
seat_prices["seats-FCA"] = 30.00;
seat_prices["seats-FCP"] = 27.00;
seat_prices["seats-FCC"] = 24.00;
//Calculation
function calculateTotal(value, seat_prices) {
return value * seat_prices;
}
function getSeatPrice() {
var seatPrice = 0;
var form = document.forms["seatform"];
var seatSTA = form.elements["seats-STA"];
var seatSTP = form.elements["seats-STP"];
var seatSTC = form.elements["seats-STC"];
var seatFCA = form.elements["seats-FCA"];
var seatFCP = form.elements["seats-FCP"];
var seatFCC = form.elements["seats-FCC"];
seatPrice = seat_prices[seatSTA.value, seatSTP.value, seatSTC.value, seatFCA.value, seatFCP.value, seatFCC.value];
return seatPrice;
}
function getTotal() {
var total = seatSTA + seatSTP + seatSTC + seatFCA + seatFCP + seatFCC;
document.getElementById('total').innerHTML = "Total Price for Tickets $" + total;
}
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Something like this?
Note I wrapped the divs in a div id="container" - you even had a trailing </div> so I assume you already had one. Change the id below to whatever you have or add id="container" to yours
PS: It is not a great idea to not allow the user to reset the seats, so I would personally remove the disabled from the first option
// we are better off with an object
var seat_prices = {
"STA": 19.80,
"STP": 17.50,
"STC": 15.30,
"FCA": 30.00,
"FCP": 27.00,
"FCC": 24.00
};
window.addEventListener("load", function() { // when page has loaded
document.getElementById("container").addEventListener("change", function(e) {
// the above listener catches ALL changes in the div
var tgt = e.target; // whatever was changed
if (tgt.tagName === "SELECT") {
var total = 0;
Object.keys(seat_prices).forEach(function(key) { // get the keys from the object
var val = document.getElementById("seats-" + key).value;
total += val === "ticketNumber" ? 0 : val * seat_prices[key]; // get the amount
})
document.getElementById("total").value = total.toFixed(2); // show it with two decimals
}
})
})
<div id="container">
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</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>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Related

How to multiply 2 numbers form select options and sum the result

I have a form field with 2 select options for my services (logo design and letterhead design) where I want users to select the number of either logo or letter head designs they want or both.
For instance, they can select 2 logo design and 3 letter head designs. There is a fixed amount for both designs. All I want is for them to select the number they want and they can preview the total amount for all before they make payment.
I have my forms done and I can also see the amount for each select option but I'm stuck at calculating both services together.
I'm not too good at javascript but I understand a little.
//Calculate branding amount by selected option
function logo(val) {
var logo = val * 20000;
document.getElementById("ansval").value = logo;
var letterhead = vall * 20000;
document.getElementById("ansval").value = letterhead;
document.getElementById("ansval").value = logo + letterhead;
}
<form>
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<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>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

To make this work it would be better to have your function read both the selected values from the DOM, instead of passing in a single value and then trying to figure out what the other one should be. Then you can perform the calculation quite simply and update the #ansval element with the outcome.
Note the use of parseInt() in the below example so that the values are treated as numbers to be added instead of string to be concatenated. Also note the use of unobtrusive event bindings. Using onchange and other inline event attributes is bad practice and should be avoided where possible.
With all that said, try this:
let logoEl = document.querySelector('#logonumber');
let letterheadEl = document.querySelector('#letterheads');
logoEl.addEventListener('change', calcTotal);
letterheadEl.addEventListener('change', calcTotal);
function calcTotal() {
var numLogo = (parseInt(logoEl.value, 10) || 0) * 20000;
var numLetterHead = (parseInt(letterheadEl.value, 10) || 0) * 20000;
document.querySelector("#ansval").value = numLogo + numLetterHead;
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber">
<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>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads">
<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>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>

Your function have to take both the submitted value for proper calculation. i just modified your code a little bit and it's done.
function logo(val)
{
var logo = document.getElementById("logonumber").value;
var letterhead = document.getElementById("letterheads").value;
document.getElementById("ansval").value = (logo * 20000) + (letterhead * 20000);
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<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>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<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>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

Change HTML Select Tag when clicked from many identical elements

I'm trying to add some functiolality with jQuery to an HTML page but I'm having some troubles with accessing the DOM.
By now,I'm accessing to the DOM elements by 'id' that's because I think is the easiest way to do it but it has a problem. For a unique elemet it's ok but what if I have 2 or more equal elements? Id's supposed to be unique so I need a way diferent to do it.
I have some code which partially does what I need, but as I mentioned before, it only works with "one element", I need to do the same but with 2 or more "equal elements". So let me show you my code so far.
<div style="background-color: indigo;">Input
<select class="" name="" id="ana_dig">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;">
<option value="" selected disabled>Choose</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>
</select>
<select class="input" style="display:none;" id="ana">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
$(function() {
$('#ana_dig').change(function() {
$('.input').hide();
$('#' + $(this).val()).show();
});
});
As you can see, I have a 'div' which has 3 'select' and depending on what option is selected in the first 'select' it shows you the second or de third 'select'. Pretty easy but if copy and paste de 'div' the second 'div' does not work as the first. What sould I do if I want to 2, 3 or more 'div' work like the first one? Any suggestions?

Use classes instead.
NOTICE CHANGES NO MORE IDS, CLASS ADDED TO INPUTS YOU CAN HAVE MULTIPLE CLASSES SEPERATED BY SPACE
<div style="background-color: indigo;">Input
<select class="someclass" name="">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input dig" style="display:none;">
<option value="" selected disabled>Choose</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>
</select>
<select class="input ana" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
And then do this instead: SEE THE CHANGE HERE ALSO
$(function() {
$('.someclass').change(function() {
$('.input').hide();
$('.' + $(this).val()).show(); // dot is looking for class # is looking for id
});
});

I've used data attributes as an additional selector.
First we find the parent element enclosing our group of select elements. We then use jQuery toggle() function to hide and show. We can then hide and show using the data attributes.
NOTE the id's are unique in the duplicated div which is fine. The jQuery below has no dependence on IDs
$("[data-input=type]").on("change", function(){
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: indigo;" class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div style="background-color: blue;" class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
With just a little bit of effort we can extend this into dynamically added content. We just need to add one more containing element around the form.
//Event handler is now attatched to [data-input=type] inside
//formGroup, including any that are dynamically added
$("#formGroup").on("change", "[data-input=type]", function() {
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
//Code to add new row
$("#addRow").on("click", function(){
//Clone first row
var rowClone = $(".inputGroup").eq(0).clone(true);
var rowCount = $(".inputGroup").length;
//Change the ids of the nested select elements
rowClone.find("select").each(function(){
$(this).attr("id", $(this).attr("id") + rowCount);
});
//Append the row
$("#formGroup").append(rowClone);
});
.inputGroup:nth-child(even) {
background-color:#CCC;
}
.inputGroup {
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formGroup">
<div class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
</div>
<input type="button" value="Add Another Row" id="addRow"/>

Ok, this hides both the digital, and analog submenus, until it is selected by the first selection:
<script>
$(document).ready(function(){
$("select").hide();
$("#ana_dig").show();
$("#ana_dig").click(function(){
var x="#" + $(this).val();
$("select").hide();
$("#ana_dig").show();
$(x).show();
});
});
</script>
the op said if they wanted to add more in the first pull down selection, you would just add your additional option element with the value equal to the id to show. I added a reset function so when the first selection is changed, it resets... expanding it only is in the html code too.... I like to use ID for forms, and classes just for styling, and tag names for styling on page events

Display multiple selectbox and radio button values values in div

I have a site that allows users to "guess / predict" the result of a sports match
To give you an idea what I am trying to achieve have a look at the following image:
The selected teams gets displayed at the bottom of the page (as you can see on the bottom circle of the image)
What Im trying to do
Im trying to modify the script to not only display the selected team at the bottom of the page but also the selected score
Example
Chiefs by 12
Have a look at my fiddle to get an idea of what I am doing, if anyone can help me to modify my script to include the score aswell it would be tremendously appreciated
My Code:
$(document).ready(function() {
$(':radio').change(function(e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function(ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">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>
</select>
<br/>
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">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>
</select>
<br/>
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">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>
</select>
<div id="dispPicks"></div>
Fiddle Link

You can put related radio buttons and select box in a div and assign a class to it lets say team, then read checked radio button and value of select box in the same div as checked radio button belogs to. see below code -
HTML
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">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>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">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>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">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>
</select>
</div>
<div id="dispPicks"></div>
JQuery
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
});
});
JSfiddle Demo

I've made a few changes which I thought were essential:
1. since a team can't win by the score of 0, 0 is out of the select boxes
2. I gave all the select tags a data-name according to its radio button's names
and here we go DEMO
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var name=$(this).attr('name');
if($(this).val()=='Draw'){
$('#dispPicks').append($(ele).val());
}
else{
$('#dispPicks').append($(ele).val() + ' by '+$('select[data-name='+name+']').val() + '<br>');
}
});
});
});

I think you to use more id's and names.
This is what i made for you, it just basic to let you understand what i mean:
$(':radio').change(function(e) {
x = $(this).attr('name');
y = $('input[name=' + x + ']:checked').val();
$("#" + x).html(y);
});
$("select").change(function() {
x = $(this).attr('name');
y = $(this).val();
$("#" + x).html(" by " + y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="pick1" value="Shaks" />
<input type="radio" name="pick1" value="Hurricanes" />
<input type="radio" name="pick1" value="Draw" />
<select name="howMuch1">
<option value="">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>
</select>
<input type="radio" name="pick2" value="Chelsea" />
<input type="radio" name="pick2" value="Liverpool" />
<input type="radio" name="pick2" value="Draw" />
<select name="howMuch2">
<option value="">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>
</select>
<div id="picks">
<br /><span id="pick1"></span><span id="howMuch1"></span>
<br /><span id="pick2"></span><span id="howMuch2"></span>
</div>
On event (change) we make x our target and y our value.. rest is a case of put it right ;)

Hide and show select option based on select option

Hey guys any help will be appreciated. I'm trying to show a set of select option base on what is selected on another select option. I have a select option called "children" with a set of other select option which should be hidden by default. If "1" children is selected then one of the other select option should show, if "2" children is selected then two of the other option should be displayed. I have been trying to get this to work for a few days now with no luck. Can someone point me in the right directions thanks.
here is my html
<select name="child" class="form-control" id="numchds" onchange="updateRooms();">
<option value="child" selected="selected">Children</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>
</select>
<div class="row" id="childage">
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 1</label>
<select name="0" class="form-control" id="chd1age">
<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>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 2</label>
<select name="child" class="form-control" id="chd2age">
<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>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 3</label>
<select name="child" class="form-control" id="chd3age">
<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>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 4</label>
<select name="child" class="form-control" id="chd4age">
<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>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-2">
<label for="child">Child 5</label>
<select name="child" class="form-control" id="chd5age">
<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>
</select>
</div>
</div>
here is my javascript
$('#numchds').change(function () {
var val = $(this).val();
if (val === 'child') {
$('#chd1age').hide();
$('#chd2age').hide();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '1') {
$('#chd1age').show();
$('#chd2age').hide();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '2') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').hide();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '3') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').hide();
$('#chd5age').hide();
} else if (val === '4') {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').show();
$('#chd5age').hide();
} else {
$('#childage').show();
$('#chd1age').show();
$('#chd2age').show();
$('#chd3age').show();
$('#chd4age').show();
$('#chd5age').show();
}
});
Link to jsfiddle http://jsfiddle.net/BMcJ9/

Shorter I made it, work it does
$('#numchds').change(function () {
var val = this.value,
sel = $('.form-control').not(':first');
sel.each(function() {
$(this).add($(this).prev()).toggle(sel.index(this) < val)
});
}).trigger('change');
FIDDLE

$('#numchds').change(function () {
var val = $(this).val() || 5;
$('#childage > div').show().eq(val-1).nextAll().hide();
});
FIDDLE

How to multiply price by quantity and display price in text field? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to set up an order form for clothing. The price of the item varies based on it's size. I need it to multiply the value of the options in the size field (the price) by the quantity, and then display the total price. I'm guessing there's some pretty simple script to make this happen but I'm a total newbie.
I tried tinkering around with this script I found on here. Is there something I can just add to this to make it work?:
<script type="text/javascript">
$(window).load(function(){
$('form').change(function() {
var total = 0;
$.each($(".summable") ,function() {
total += parseFloat($(this).val());
});
$("#sum").val(total)
});
});
</script>
Here's the form:
<form><br />Shirts:
<br>Size<br>
<select class="summable" name="shirt size" id="shirt size">
<option value="0" selected="selected">Click to select</option>
<option value="20.00">Child(s) XSmall</option>
<option value="20.00">Child(s) Small</option>
<option value="20.00">Child(s) Medium</option>
<option value="20.00">Child(s) Large</option>
<option value="20.00">Child(s) Xlarge</option>
<option value="21.00">Adult XSmall</option>
<option value="21.00">Adult Small</option>
<option value="21.00">Adult Meduim</option>
<option value="21.00">Adult Large</option>
<option value="21.00">Adult XLarge</option>
<option value="21.00">Adult XXLarge</option>
</select>
<br />Quantity<br>
<select name="shirt quantity" id="shirt quantity">
<option value="0" selected="selected">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>
</select>
<br>
<br>
<br />Jackets:
<br>Size<br>
<select class="summable" name="jacket size" id="jacket size">
<option value="0" selected="selected">Click to select</option>
<option value="40.00">Child(s) XSmall</option>
<option value="40.00">Child(s) Small</option>
<option value="40.00">Child(s) Medium</option>
<option value="40.00">Child(s) Large</option>
<option value="40.00">Child(s) Xlarge</option>
<option value="44.00">Adult XSmall</option>
<option value="44.00">Adult Small</option>
<option value="44.00">Adult Meduim</option>
<option value="44.00">Adult Large</option>
<option value="44.00">Adult XLarge</option>
<option value="44.00">Adult XXLarge</option>
</select>
<br />Quantity<br>
<select name="jacket quantity" id="jacket quantity">
<option value="0" selected="selected">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>
</select>
<br>
<br>
Total:<input id="sum" type="text"/>
</form>
Any insight greatly appreciated, thanks.

$(function () {
$('select').change(function () {
var s = $('#shirt_size option:selected').val();
var sq = $('#shirt_quantity option:selected').val();
var j = $('#jacket_size option:selected').val();
var jq = $('#jacket_quantity option:selected').val();
if (s === 0 && j === 0) {
alert('You must select a size');
}
if (sq === 0 && jq === 0) {
alert('You must select a quantity');
}
var stotal = s * sq;
var jtotal = j * jq;
var total = stotal + jtotal;
$('#sum').val(total);
});
});
Something like this would do the trick.. (if you cleaned up the HTML, that is)

Consider a structure like
<form>
<fieldset class="itemgroup">
<select class="size">
<option value="0" disabled selected>Size</option>
<option value="10.00">Regular</option>
<option value="15.00">Large</option>
</select>
<select class="quantity">
<option value="0" disabled selected>Quantity</option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</fieldset>
</form>
Now to get the <select>s then their values and multiply, because we're working within a node that supports the form's change event and can be an ancestor of form elements..
$('.itemgroup').change(function () {
var size = parseFloat(this.getElementsByClassName('size')[0].value),
quantity = parseFloat(this.getElementsByClassName('quantity')[0].value);
console.log(size, quantity, size * quantity);
});
Demo

This should do the job for you:
$(document).ready(function()
{
$('form').change(function()
{
var total = 0;
$.each($(".summable") ,function()
{
var price = parseFloat($(this).val()),
qty = parseInt($(this).nextAll("select:first").val());
total += price*qty;
});
$("#sum").val(total)
});
});
Example here:
http://jsfiddle.net/vmD85/7/

Here: This should do the trick. :)
I've fixed some code. Some of the changes I made:
I removed a lot of the <br>'s.
I created a function total to contain your update code
I enclosed each type in a <div> with a class name "typegroup" that I first seek up to using .closest() Then seek down to the quality field I labeled with the class "quantity". I used classes to find each one so they are repeatable for each type (they are not forced to be unique).
I changed fields like "shirt size" to "shirt_size" since they need to be one word.
Here is the working example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
total = function(){
$('form').change(function() {
var total = 0;
$(".summable").each(function() {
total += parseFloat($(this).val() * $(this).closest(".typegroup").find(".quantity").val());
});
$("#sum").val(total)
});
}
$(document).ready(function(){
total();
});
</script>
</head>
<body>
<form>
<div class="typegroup">
<div>Shirts:</div>
<div>Size: <span>
<select class="summable" name="shirt_size" id="shirt_size">
<option value="0" selected="selected">Click to select</option>
<option value="20.00">Child(s) XSmall</option>
<option value="20.00">Child(s) Small</option>
<option value="20.00">Child(s) Medium</option>
<option value="20.00">Child(s) Large</option>
<option value="20.00">Child(s) Xlarge</option>
<option value="21.00">Adult XSmall</option>
<option value="21.00">Adult Small</option>
<option value="21.00">Adult Meduim</option>
<option value="21.00">Adult Large</option>
<option value="21.00">Adult XLarge</option>
<option value="21.00">Adult XXLarge</option>
</select>
</span></div>
<div>Quantity: <span>
<select class="quantity" name="shirt_quantity" id="shirt_quantity">
<option value="0" selected>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>
</select>
</span></div>
</div>
<br>
<div class="typegroup">
<div>Jackets:</div>
<div>Size: <span>
<select class="summable" name="jacket_size" id="jacket_size">
<option value="0" selected="selected">Click to select</option>
<option value="40.00">Child(s) XSmall</option>
<option value="40.00">Child(s) Small</option>
<option value="40.00">Child(s) Medium</option>
<option value="40.00">Child(s) Large</option>
<option value="40.00">Child(s) Xlarge</option>
<option value="44.00">Adult XSmall</option>
<option value="44.00">Adult Small</option>
<option value="44.00">Adult Meduim</option>
<option value="44.00">Adult Large</option>
<option value="44.00">Adult XLarge</option>
<option value="44.00">Adult XXLarge</option>
</select>
</span></div>
<div>Quantity: <span>
<select class="quantity" name="jacket_quantity" id="jacket_quantity">
<option value="0" selected>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>
</select>
</span></div>
</div>
<br>
<div>Total: <input id="sum" type="text"/></div>
</form>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Updating Total cost with Multiple drop down lists - javascript

Related

How to multiply 2 numbers form select options and sum the result

Change HTML Select Tag when clicked from many identical elements

Display multiple selectbox and radio button values values in div

Hide and show select option based on select option

How to multiply price by quantity and display price in text field? [closed]

Categories

Resources