Drop down menu with HTML / JavaScript price calculation form - javascript

I'm trying to get a drop down menu to work with a price calculation form, but the drop down menu won't add any price value to the total price. I'm pretty bad at doing these things, so maybe one of you knows how to fix this?
This is the link to the code.
HTML:
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
Extra domein $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
Verlengservice $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
Domein support $1.99
</label>
<select name="product" id="p3" onclick="totalIt()"/>
<option value="249">Thema 'Ambachtelijk'</option>
<option value="249">Thema 'Blog - Lifestyle'</option>
<option value="199">Thema 'Bed en Brood'</option>
<option value="249">Thema 'Freelancer'</option>
</select>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit"/>
<input value="Reset" type="reset"/>
</form>
JavaScript:
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
Any ideas?

You need to get the selected value from <select>
And Change onclick to onchange
The onchange event occurs when the value of an element has been changed.
Try this:
if(input[i].tagName == 'SELECT'){
total += Number(input[i].options[input[i].selectedIndex].value);
}
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if(input[i].tagName == 'SELECT'){
total += Number(input[i].options[input[i].selectedIndex].value);
}
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onchange="totalIt()"/>
Extra domein $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onchange="totalIt()"/>
Verlengservice $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onchange="totalIt()"/>
Domein support $1.99
</label>
<select name="product" id="p3" onchange="totalIt()"/>
<option value="249">Thema 'Ambachtelijk'</option>
<option value="249">Thema 'Blog - Lifestyle'</option>
<option value="199">Thema 'Bed en Brood'</option>
<option value="249">Thema 'Freelancer'</option>
</select>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit"/>
<input value="Reset" type="reset"/>
</form>

You should use onchange instead of onclick for select event. The main problem is that you aren't adding the value of select in the totalIt func. Might be a good idea to give the select a different id from your 3rd checkbox.

You need to modify your html, you are using same id like p3. Also, you need to handle onchange event. Please see the reference code:
var dropdownTotal = 0;
function dropDownTotalHandler() {
var x = document.getElementById("dropdownProducts").value;
dropdownTotal += parseFloat(x);
document.getElementById("total").value = "$" + dropdownTotal.toFixed(2);
}
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()" />
Extra domein $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()" />
Verlengservice $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()" />
Domein support $1.99
</label>
<select name="product" id="dropdownProducts" onchange="dropDownTotalHandler()" />
<option value="249">Thema 'Ambachtelijk'</option>
<option value="249">Thema 'Blog - Lifestyle'</option>
<option value="199">Thema 'Bed en Brood'</option>
<option value="249">Thema 'Freelancer'</option>
</select>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total" />
</label>
</fieldset>
<input value="Submit" type="submit" />
<input value="Reset" type="reset" />
</form>
If you want to keep the event handler same, then here is one of the way how you can do it. Hopefully, this is what you want but if not feel free to change it.
First, change the html to mention totalIt as event handler like below:
onchange="totalIt(this.value)"
Then modify the script code. Here, the addition into total is happening for one checkbox at a time:
<script>
var total = 0;
function totalIt(dropDownValue) {
if (!dropDownValue) {
total += parseFloat(event.target.value);
} else {
total += parseFloat(dropDownValue);
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
</script>
See if this is what you are looking for?

Related

Render Price in external Div

I have found a code to display the final price based on some selections from a form imputs (checkbox) affecting the final price. I want also it to affect an external div with text on it. Is a huge fixed element I've created displaying "Final Cost" and I also want this to render the final price by changing the getElementByID and nothing happened. Could you help me to solve this?
I want also .priceText1 also to be affected:)
Actual code is
HTML
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
Candy $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
Burger $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
Coke $1.99
</label>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit"/>
<input value="Reset" type="reset"/>
</form>
<div class="priceWrapper">
<h3 class="priceText1">$0.00</h3>
<h3 class="priceText2">Final Cost</h3>
</div>
JS
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
You could simply use innerText with querySelector to add the total price to the element .priceText1 like :
document.querySelector(".priceText1").innerText = "$" + total.toFixed(2);
Hope this helps.
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
document.querySelector(".priceText1").innerText = "$" + total.toFixed(2);
}
<form action="" id="theForm">
<fieldset>
<legend>
Products
</legend>
<label>
<input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
Candy $12.95
</label>
<label>
<input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
Burger $5.99
</label>
<label>
<input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
Coke $1.99
</label>
<label>
Total
<input value="$0.00" readonly="readonly" type="text" id="total"/>
</label>
</fieldset>
<input value="Submit" type="submit" />
<input value="Reset" type="reset" />
</form>
<div class="priceWrapper">
<h3 class="priceText1">$0.00</h3>
<h3 class="priceText2">Final Cost</h3>
</div>

Sum the values of the inputs of a specific form and display the result

My page is made of several forms with several inputs called "values[]".
When modifying these inputs in one of the forms, I would like to sum the values and display the result in an other input of the same form called "total".
My html code looks like that:
<form action="index.php" method="post" id="form_1">
<input type="text" name="values[]" id="value_1_1" onkeyup="sum_values(this)" />
<input type="text" name="values[]" id="value_1_2" onkeyup="sum_values(this)" />
[... More inputs with the name "values[]" ]
<input type="text" name="total" disabled>
</form>
<form action="index.php" method="post" id="form_2">
<input type="text" name="values[]" id="value_2_1" onkeyup="sum_values(this)" />
<input type="text" name="values[]" id="value_2_2" onkeyup="sum_values(this)" />
[... More inputs with the name "values[]" ]
<input type="text" name="total" disabled>
</form>
and my javascript is :
<script type="text/javascript">
function sum_values(x){
var arr = document.getElementById(x.form.id).elements['values[]'];
var tot=0;
for(var i=0;i<arr.length;i++)
{
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById(x.form.id).elements['total'].value = tot;
}
</script>
I was very happy to finally see the first form working, but I then figured out that the second one was not...
Could you help me to understand why ?
I'm a beginner at javascript and I tried to arrange some code I found.
Thank you very much
If you'd like to get all elements within a specific form, you can do so using code similar to the following. The rest of your code should work fine, except your final result input selector.
var formId = 'form1';
var arr = document.querySelectorAll('#' + formId + ' [name="values[]"]');
var tot=0;
for(var i=0; i<arr.length; i++) {
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.querySelector('#' + formId + ' [name="total"]').value = tot;
<form id="form1">
<input type="text" name="values[]" value="5" />
<input type="text" name="values[]" value="1" />
<input type="text" name="values[]" value="6" />
<input type="text" name="values[]" value="8" />
<input type="text" name="values[]" value="2" />
<input type="text" name="values[]" value="0" />
<input type="text" name="values[]" value="1" />
<input type="text" name="values[]" value="3" />
<input type="text" name="total" disabled>
</form>

Javascript - Calculating Sum of Checkboxes From Array

Based on the answers below I have edited the post to give some more details. Thanks everyone.
EDITED:
This is the code I have:
#foreach($amount_data as $amount)
<div class="col-sm-12">
<div class="input-checkbox">
<div class="inner"></div>
<input type="checkbox" name="items[]" value="{{$amount->amount}}" onchange="checkTotal()" />
</div>
<span>{{$amount->item_name}} - <b>{{$amount->amount}} {{$form->currency}}</b></span>
</div>
#endforeach
<br/> Total: <input type="text" size="2" name="total" value="0" />
#endif
Javascript:
<script type="text/javascript">
function checkTotal() {
var sum = 0,
frm = document.getElementById("payment-form"),
cbs = frm["items[]"],
i;
for (i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
sum += parseInt(cbs[i].value);
}
}
frm.total.value = sum;
}
</script>
Form info:
<form action="{{url('secure-checkout/'.$form->unique_url_code)}}" method="POST" id="payment-form" name="payment-form">
Doesn't seem to work. No errors in console. Anything wrong?
You would need to use bracket notation because of the [] in the name
document.listForm["items[]"][i].checked
function checkTotal() {
var sum = 0,
frm = document.getElementById("payment-form"),
cbs = frm["items[]"],
i;
for (i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
sum += parseInt(cbs[i].value);
}
}
frm.total.value = sum;
}
<form name="payment-form" id="payment-form">
<input type="checkbox" name="items[]" value="2" onchange="checkTotal()" />2<br/>
<input type="checkbox" name="items[]" value="5" onchange="checkTotal()" />5<br/>
<input type="checkbox" name="items[]" value="10" onchange="checkTotal()" />10<br/>
<input type="checkbox" name="items[]" value="20" onchange="checkTotal()" />20<br/>
Total: <input type="text" size="2" name="total" value="0" />
</form>
Here is an answer using jQuery. Hope this helps a bit! I've separated the listener and the function as I believe it makes things easier to edit later on. You could combine them to shorten the code.
//Listener for the checkbox
$("input[name='choice']").change(function() {
sumUp();
});
//Funtion that adds the total up
function sumUp() {
var sum = 0;
$(" input[name='choice']:checked").each(function() {
sum += parseInt($(this).val());
});
$("input[name=total]").val(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="listForm">
<input type="checkbox" name="choice" value="2" />2
<br/>
<input type="checkbox" name="choice" value="5" />5
<br/>
<input type="checkbox" name="choice" value="10" />10
<br/>
<input type="checkbox" name="choice" value="20" />20
<br/> Total:
<input type="text" size="2" name="total" value="0" />
</form>
You can get the Sum of checked checkboxes array by simply using Array.prototype.reduce():
function checkTotal() {
document.listForm.total.value = Array.prototype.reduce.call(
document.listForm.choice,
function (sum, el) {
return el.checked ? sum + +el.value : sum;
}, 0
);
}
<form name="listForm">
<input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/>
<input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/>
<input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/>
<input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/>
Total: <input type="text" size="2" name="total" value="0"/>
</form>

How do I change a price when multiple items are selected?

I am doing a project (school) and need help with JavaScript programming. The code can be seen here: https://jsfiddle.net/zvov1jpr/3/
HTML:
<script src="java.js"></script>
<div id="formular">
<div id="formulartekst">
<form>
<h2 class="formskrift">Order Hot Food</h2>
<p class="kroner">$39 / $29 when 3 or more checked</p>
<input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" /> Monday
<br>
<input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" /> Tuesday
<br>
<input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" /> Wednesday
<br>
<input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" /> Thursday
<br>
<input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" /> Friday
<label>
<br> Total
<input value="$0.00" readonly type="text" id="total" />
</label>
<input type="submit" value="Order">
</form>
</div>
</div>
JavaScript:
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
When I check boxes it automatically adds up the price (for some reason it doesn't on JSFiddle but it works fine on my website). However, I need it so when I have 3 or more boxes checked, it has to change the price to $29 pr. Check instead of $39.
There was a small JSFiddle issue that I have already commented about.
Apart from that you can use querySelectors to reduce code.
JSFiddle
function totalIt() {
var input = document.querySelectorAll("input[name='product']:checked")
document.getElementById("total").value = "$" +
(input.length * (input.length > 2 ? 29 : 39))
}
<script src="java.js"></script>
<div id="formular">
<div id="formulartekst">
<form>
<h2 class="formskrift">Order Hot Food</h2>
<p class="kroner">$39 / $29 when 3 or more checked</p>
<input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" />Monday
<br>
<input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" />Tuesday
<br>
<input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" />Wednesday
<br>
<input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" />Thursday
<br>
<input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" />Friday
<label>
<br>Total
<input value="$0.00" readonly type="text" id="total" />
</label>
<input type="submit" value="Order">
</form>
</div>
</div>
Change your function to:
function totalIt(){
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total+= 1;
}
}
if(total>=3){
document.getElementById("total").value = "$" + (total*29).toFixed(2);
}
else{
document.getElementById("total").value = "$" + (total*39).toFixed(2);
}

Update input field on checkbox selection with Javascript

I would like two things to happen.
One
when a selection is made the input field updates as the total,
Two
the check boxes are dynamically generated and may sometimes be up to
six and sometimes as low as one product.
This is what I have made, but I can't get it to work :(
<script type="text/javascript">
function updateTotal(){
document.getElementById('total').value =
(document.getElementById('date0').checked?
parseFloat(document.getElementById('date0').price):0) +
(document.getElementById('date1').checked?
parseFloat(document.getElementById('date1').price):0) +
(document.getElementById('date2').checked?
parseFloat(document.getElementById('date2').price):0);
}
</script>
With this as form
<form>
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
<input id="date0" type="checkbox" name="form[date]" value="blue" price="10" onChange="javascript:updateTotal();">product 1<br />
<input id="date1" type="checkbox" name="form[date]" value="green" price="30" onChange="javascript:updateTotal();">product 2<br />
<input id="date2" type="checkbox" name="form[date]" value="red" price="50" onChange="javascript:updateTotal();">product 3<br />
</td>
<td>
Total cost is:
<input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
</td>
</form>
Any help will be great!
You can do this by changing your code and markup as follows:
HTML
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
<input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();">product 1<br />
<input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();">product 2<br />
<input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();">product 3<br />
</td>
<td>
Total cost is:
<input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
</td>​
JS
function updateTotal(){
var date0 = document.getElementById('date0');
var date1 = document.getElementById('date1');
var date2 = document.getElementById('date2');
var amount = 0;
amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;
document.getElementById('total').value = amount;
}​
A couple of things to note:
You do not need to include the javascript: before the function in the onchanged attribute.
You should prefix custom attributes with the data-* prefix.
You should surround your td tags with tr and table. The way that you are using them it would make more send to use an ul tag with li children.
DEMO - http://jsfiddle.net/9mxh5/
If the checkboxes are dynamically generated and you don't know how many you may have:
HTML
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
<input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal(this);">product 1<br />
<input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal(this);">product 2<br />
<input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal(this);">product 3<br />
</td>
<td>
JS
var amount = 0;
function updateTotal(element){
var price = parseFloat(element.getAttribute('data-price'));
amount += element.checked ? price : price*(-1);
document.getElementById('total').value = amount;
}​
DEMO - http://jsfiddle.net/9mxh5/2/

Categories

Resources