Render Price in external Div - javascript

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>

Related

Build a dependence in the behavior of multiple checkboxes and input fields

I have a set of checkboxes for some fruits and vegetables. And I need to write such a function that when at least one of the fruits is selected, the fruit input field appears and does not disappear as long as at least one fruit is selected. When all checkboxes from the fruit are unchecked, the input field should disappear. And the same thing with vegetables.
But I'm confused and can't figure out how to do it better. I would be grateful for your help.
<div>
<input type="checkbox" id="apple" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" id="banana" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="banana">banana</label>
</div>
<div>
<input type="checkbox" id="mangoe" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="mangoe">mangoe</label>
</div>
<div>
<input type="checkbox" id="potato" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="potato">potato</label>
</div>
<div>
<input type="checkbox" id="celery" class="custom-checkbox" autocomplete="off" onchange="showInput()">
<label for="celery">celery</label>
</div>
<input type="text" id="fruits" name="fruits">
<input type="text" id="vegetables" name="vegetables">
function showInput() {}
Check out this code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<input type="checkbox" id="apple" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" id="banana" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
<label for="banana">banana</label>
</div>
<div>
<input type="checkbox" id="mangoe" class="fruits custom-checkbox" autocomplete="off" onchange="showFruits()">
<label for="mangoe">mangoe</label>
</div>
<div>
<input type="checkbox" id="potato" class="vegetables custom-checkbox" autocomplete="off" onchange="showVeggies()">
<label for="potato">potato</label>
</div>
<div>
<input type="checkbox" id="celery" class="vegetables custom-checkbox" autocomplete="off" onchange="showVeggies()">
<label for="celery">celery</label>
</div>
<input type="text" id="text_fruits" name="fruits" disabled>
<input type="text" id="text_vegetables" name="vegetables" disabled>
<button onclick="myFunction()">Click me</button>
<script>
function showFruits() {
var fruits_checklist = document.getElementsByClassName("fruits");
var result = false;
for (var i = 0; i < fruits_checklist.length; i++)
result = result || fruits_checklist[i].checked;
document.getElementById("text_fruits").disabled = !result;
}
function showVeggies() {
var fruits_checklist = document.getElementsByClassName("vegetables");
var result = false;
for (var i = 0; i < fruits_checklist.length; i++)
result = result || fruits_checklist[i].checked;
document.getElementById("text_vegetables").disabled = !result;
}
</script>
</body>
</html>
I added class fruits to all fruits and class vegetables to all vegetables for groupings. Renamed text-feilds to avoid duplicacy. I created separate functions for showing/hiding fruits and vegetables.

Drop down menu with HTML / JavaScript price calculation form

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?

Calculate total on checkbox checked

HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..
Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE
$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});

how to calculate text field value without submit button

I am trying to calculate a value without a submit button. If a user enters the weight, height and number of PCs then my code should calculate the value and display it in the total text field automatically without refreshing the page. How can I do that?
This is my calculation: total = weight * height * no of pcs
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
try this code
javascript code
<script type="text/javascript">
function getOrderTotal() {
var iweight= document.myform.weight.value;
var iheight= document.myform.iheight.value;
var ino= document.myform.no.value;
if(!iweight.match(recurrency)) {
alert('Please provide an item cost in 0.00 format!');
}
else {
var ifinal=iweight * iheight * ino;
);
ifinal *= 100;
ifinal = Math.ceil(ifinal);
ifinal /= 100;
if(ifinal) {
ifinal = ifinal;
}
document.getElementById('mytotal').value = ifinal;
}
}
html code
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<label>
<span>Weight:</span>
<input name="weight" type="text" id="weight" onchange="getOrderTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="height" id="height" type="text" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="no" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="mytotal" value="0" size="3" maxlength="4"/>
</label>
</div>
with jquery
$( '[name="mytax"]' ).change(function() {
//add here your formula
});
You will Use something like this
Include jquery code in your file
<script>
$(document).ready(function() {
$('input[name="no"]').keyup(function() {
var kg = $('input[name="kg"]').val();
var mytax = $('input[name="mytax"]').val();
var no = $('input[name="no"]').val();
var total = parseInt(kg) * parseInt(mytax) * parseInt(no);
$('input[name="Total"]').val(total);
});
});
</script>
Hope it will Work
Try this:
In html add ids to all input fields so that we can easily identify any element:
<div class="right">
<label>
<span> Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" id="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" id="kg" type="text" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" id="mytax" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" id="no" type="text" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="total" id="total" type="text" value="0" size="3" maxlength="4"/>
</label>
</div>
jquery:
1) check if value not then store value in any variable with parseFloat
here we have use parseFloat because because price or weight may be in float value.
$( document ).ready(function() {
$('#kg, #mytax, #no').change(function () {
var kg = ($("#kg").val() != "") ? parseFloat($("#kg").val()) : 0;
var mytax = ($("#mytax").val() != "") ? parseFloat($("#mytax").val()) : 0;
var no = ($("#no").val() != "") ? parseFloat($("#no").val()) : 0;
var total = kg * mytax * no;
$('#total').val(total);
});
});
Without using JQuery or any other JavaScript Library, the plain vanilla JavaScript solution will be to tap the "keypress" event.
Here is an example code just to give you the idea:
<html>
<head>
<script>
function calculate () {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
document.getElementById("result").innerHTML = a * b;
}
</script>
</head>
<body>
First Value <input type="text" id="a"></input>
<br>
Second Value <input type="text" id="b" onkeyup="calculate()"></input>
<br>
<div id="result"></div>
</body>
</html>
The function calculate() is invoked on key press. It takes the value and does the multiplication.
You can try this.
<div class="right">
<label>
<span>Id :</span>
<input id="name" type="text" name="roll" />
</label>
<label>
<span>material name :</span>
<input type="text" name="material" placeholder="material Name" />
</label>
<input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>
<label>
<span>Weight:</span>
<input name="kg" type="text" id="weight" onblur="findTotal()" size="10" maxlength="10" value="0"/>
</label>
<label>
<span> height:</span>
<input name="mytax" type="text" id="height" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> no of pcs :</span>
<input name="no" type="text" id="nopc" onblur="findTotal()" value="0" size="3" maxlength="4"/>
</label>
<label>
<span> Total :</span>
<input name="Total" type="text" id="total" value="0" size="3" maxlength="4"/>
</label>
</div>
<script type="text/javascript">
function findTotal(){
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var pc = document.getElementById('nopc').value;
total = weight * height * pc;
if(isNaN(total)){
alert("Please enter only numbers");
}
document.getElementById('total').value = total;
}
</script>

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);
}

Categories

Resources