I am trying to implement a weight converter that takes pounds(lb) and converts it to kg and vice-versa in the total, I can't seem to get the logic of it right, here is my code, I don't want to use any libraries or frameworks because I want to learn the fundamentals of JavaScript, and also don't know how to implement the discount option.
Here is what I was able to do.
var appleWeight = +document.getElementById('weight1').value;
var orangeWeight = +document.getElementById('weight2').value;
var grapeWeight = +document.getElementById('weight3').value;
var bananaWeight = +document.getElementById('weight4').value;
var totalWeight = appleWeight + orangeWeight + grapeWeight + bananaWeight;
document.getElementById('total_weight').innerHTML = totalWeight;
console.log(totalWeight)
var applePrice = +document.getElementById('price1').value;
var orangePrice = +document.getElementById('price2').value;
var grapePrice = +document.getElementById('price3').value;
var bananaPrice = +document.getElementById('price4').value;
var totalPrice = applePrice + orangePrice + grapePrice + bananaPrice;
var discount = document.getElementById('discount').value;
var discountAmount = (totalPrice * Number(discount)) / 100
var finalPrice = totalPrice - discountAmount
document.getElementById('total_price').innerHTML = finalPrice;
console.log("total price " + totalPrice)
var lb = document.getElementsByTagName('select'.value)
<h1>JS Grocery Shop</h1>
<span class="label">Apple</span> <input type="number" name="weight" id="weight1" value="3.5" />
<select><option>kg</option><option class="lb" value="lb">lb</option></select> # $<input type="number" name="price" id="price1" value="2.3" /><br />
<span class="label">Orange</span><input type="number" name="weight" id="weight2" value="5" />
<select><option>kg</option><option class="lb" value="lb">lb</option></select> # $<input type="number" name="price" id="price2" value="3.0" /><br />
<span class="label">Grape</span> <input type="number" name="weight" id="weight3" value="2.0" />
<select><option>kg</option><option class="lb" value="lb">lb</option></select> # $<input type="number" name="price" id="price3" value="1.5" /><br />
<span class="label">Banana</span><input type="number" name="weight" id="weight4" value="1" />
<select><option>kg</option><option class="lb" value="lb">lb</option></select> # $<input type="number" name="price" id="price4" value="0.5" /><br /> Discount : <select id="discount">
<option value="0">0</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
</select>
<br><br> Total Price : <span id="total_price"></span><br /> Total Weight : <span id="total_weight"></span>
Related
I am trying to recalculate the form based on a payment method. What I have is sort of working. It fails however if the payment method is changed after entering the number of widgets needed. The widget 2 value stays intact but the widget 1 calculation reverts to 0 yet the entered number is still in the number of widgets needed for Widget 1.
function lf(vntAmount) {
vntAmount = parseFloat(vntAmount) || 0; // find number (parseFloat) switch it to 0 if not a number
vntAmount = vntAmount * 100; // cost of widget 1
document.frmConvert.box1.value = vntAmount.toFixed(2)
}
function rf(vntAmount) {
vntAmount = parseFloat(vntAmount) || 0; // find number (parseFloat)
vntAmount = vntAmount * 200; // cost of widget 2
document.frmConvert.box2.value = vntAmount.toFixed(2)
}
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
// var result = document.getElementById('result'); // don't know what this does
if (document.getElementById('visa_checked').checked) {
var myResult = (parseFloat(myBox1) + parseFloat(myBox2)) * .15;
} else {
var myResult = (parseFloat(myBox1) + parseFloat(myBox2)) * .12;
}
var myResult2 = myResult + (parseFloat(myBox1) + parseFloat(myBox2));
result.value = myResult.toFixed(2);
result2.value = '$' + myResult2.toFixed(2);
}
body {
font-family: arial;
font-size: 100%;
color: #aea2a2
}
<html>
<head>
<title>Test Form</title>
<script type="text/javascript">
onload = function() {
location.href = "#";
}
</script>
</head>
<body>
<FORM ACTION="processform.php" METHOD=POST name="frmConvert">
<h4>Widgets For Sale</h4>
Mandatory field *<br><br> Name*
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Address
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> City
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Postal Code<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Email
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Phone*
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Method of payment<br>
<input type="radio" name="sheetdata[]" value="Visa" id="visa_checked" onChange="lf(this.value);calculate();">Visa<br>
<input type="radio" name="sheetdata[]" value="Cheque" onChange="lf(this.value);calculate();">Cheque<br>
<input type="radio" name="sheetdata[]" value="E-Transfer" onChange="lf(this.value);calculate();" checked>E Transfer<br>
<br><br> Number of Widget One needed:<br>
<input name="sheetdata[]" id="txtAmount" type="text" value="" onchange="lf(this.value);calculate();" size="3" value="0" /> # $100 <input name="sheetdata[]" size="5" readonly="readonly" id="box1" value="0" />
<br><br> Number of Widget Two needed<br>
<input name="sheetdata[]" id="txtAmount2" type="text" value="" onChange="rf(this.value);calculate();" size="3" value="0" /> # $200 <input name="sheetdata[]" size="5" readonly="readonly" id="box2" value="0" />
<br><br> Tax 12% <input name="sheetdata[]" id="result" size="5" readonly="readonly" /> 3 % added for Credit Card
<br><br> Total <input name="sheetdata[]" id="result2" size="5" readonly="readonly" />
<input type="hidden" name="sheet_name" value="Test_Form">
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
<p>Thank You!</p>
</form>
</body>
</html>
Not sure what to try to fix this.
I have an tax invoice page for making invoice. I am using javascript for calculating the amount. I want to add courier charges in javascript. Can anybody help me?
Here is code
function calculateTotal() {
var totalAmount = 0;
$("[id^='price_']").each(function() {
var id = $(this).attr('id');
id = id.replace("price_", '');
var price = $('#price_' + id).val();
var quantity = $('#quantity_' + id).val();
if (!quantity) {
quantity = 1;
}
var total = price * quantity;
$('#total_' + id).val(parseFloat(total));
totalAmount += total;
});
$('#subTotal').val(parseFloat(totalAmount));
var taxRate = $("#taxRate").val();
var subTotal = $('#subTotal').val();
if (subTotal) {
var taxAmount = subTotal * taxRate / 100;
$('#taxAmount').val(taxAmount);
subTotal = parseFloat(subTotal) + parseFloat(taxAmount);
$('#totalAftertax').val(subTotal);
var amountPaid = $('#amountPaid').val();
var totalAftertax = $('#totalAftertax').val();
if (amountPaid && totalAftertax) {
totalAftertax = totalAftertax - amountPaid;
$('#amountDue').val(totalAftertax);
} else {
$('#amountDue').val(subTotal);
}
}
CSS is only for demo ( you can ignore it )
I added packaging fees & shipping fees with also FREE option each
$(document).ready(function() {
calculateTotal();
});
function calculateTotal() {
var totalAmount = 0;
$("[id^='price_']").each(function() {
var id = $(this).attr('id').replace("price_", '');
var price = $('#price_' + id).val();
var quantity = $('#quantity_' + id).val();
if (!quantity) {
quantity = 1;
}
var total = price * quantity;
$('#total_' + id).val(parseFloat(total));
totalAmount += total;
});
$('#subTotal').val(parseFloat(totalAmount));
var taxRate = parseFloat($("#taxRate").val());
var subTotal = parseFloat($('#subTotal').val());
if (subTotal) {
var taxAmount = subTotal * taxRate / 100;
$('#taxAmount').val(taxAmount);
subTotal = parseFloat(subTotal) + parseFloat(taxAmount);
$('#totalAftertax').val(subTotal);
var amountPaid = $('#amountPaid').val();
var totalAftertax = $('#totalAftertax').val();
if (amountPaid && totalAftertax) {
totalAftertax = totalAftertax - amountPaid;
$('#amountDue').val(totalAftertax);
} else {
$('#amountDue').val(subTotal);
}
var amoutDue = parseFloat($('#amountDue').val());
var shipping = parseFloat($('#shipping').val());
var packaging = parseFloat($('#packaging').val());
$('#amountDue').val(amoutDue + shipping + packaging);
}
}
[disabled],
[readonly] {
background-color: #eee;
border: 1px solid #ccc;
color: #888;
}
div {
padding: 5px 10px;
}
div:nth-child(even) {
background: #eee;
}
label {
display: inline-block;
width: 120px;
}
<div>
<input id="price_1" type="number" value="5" />
<input id="quantity_1" type="number" value="3" min="1" />
<input id="total_1" type="number" value="15" readonly />
</div>
<div>
<input id="price_3" type="number" value="15" />
<input id="quantity_3" type="number" value="1" min="1" />
<input id="total_3" type="number" value="15" readonly />
</div>
<div>
<input id="price_8" type="number" value="20" />
<input id="quantity_8" type="number" value="2" min="1" />
<input id="total_8" type="number" value="40" readonly />
</div>
<div align="center">
<button type="button" onclick="calculateTotal()">Update Cart</button>
</div>
<hr />
<div><label>Sub Total:</label>
<input id="subTotal" type="number" value="0" readonly /></div>
<div><label>Tax Rate:</label>
<input id="taxRate" type="number" value="15" readonly /></div>
<div><label>Tax Amount:</label>
<input id="taxAmount" type="number" value="0" readonly /></div>
<div><label>Total After Tax:</label>
<input id="totalAftertax" type="number" value="0" readonly /></div>
<div>
<label>Shipping:</label>
<select id="shipping" onchange="calculateTotal()">
<option value="0">Regular FREE ( 12-15 days )</option>
<option value="12.99">Express $12.99 ( 1-2 days )</option>
<option value="9.99">UPS $9.99 ( 2-3 days )</option>
<option value="6.99">DHL $6.99 ( 3-5 days )</option>
</select>
</div>
<div>
<label>Packaging:</label>
<select id="packaging" onchange="calculateTotal()">
<option value="0">Regular FREE</option>
<option value="2.99">Package 1 $2.99</option>
<option value="4.99">Package 2 $4.99</option>
<option value="7.99">Package 3 $7.99</option>
</select>
</div>
<div><label>Amount Paid:</label> <input id="amountPaid" type="number" value="15" readonly /></div>
<div><label>Amount Due:</label> <input id="amountDue" type="number" value="0" readonly /></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to select the number of person attending and it must be matched with meal quantity.
User must specify whether vegetarian meal or non-vegetarian. A veg meal costs $5 while a non-veg meal cost $10. For example, if there's 3 person attending with 2 vegetarian and 1 non-vegetarian, the total price of meal will be $20 total. Also the meal quantity options must have only 3 person in total. How do I do this in Javascript only?
How do I display the final price also?
function validate() {
var dn = document.getElementById("dropDN").value;
return false;
}
function showInput() {
document.getElementById('displaydn').innerHTML =
document.getElementById("dropDN").value;
}
<form class="myForm" onsubmit="return validate();">
Number of person attending:
<select id="dropDN">
<option value="">Select one</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
<option value="Four">4</option>
</select>
<br />
<br />Meal Quantity Options: Vegetarian
<input type="checkbox" onclick="" name="" id="veg">
<input type="number" max="4" />
<br /> Non-Vegetarian
<input type="checkbox" onclick="" name="" id="nonveg">
<input type="number" max="4" />
<br />
<br />
<br />
<input type="submit" onclick="showInput()">
<br>
<br> Number of person attending: <span id="displaydn"> </span>
<br />
</form>
Listen to the change event for both input controls.
When they change, update the respective global variable (either vegetarian or nonVegetarian and then update the total meals and cost values.
var vegetarian = 0;
var nonVegetarian = 0;
var cost = 0.00;
document.querySelector('#veg').addEventListener('change', function(e)
{
vegetarian = parseInt(document.querySelector('#veg').value, 10);
if(vegetarian + nonVegetarian > 4) // Make sure we never have more than 4 customers
{
nonVegetarian--;
document.querySelector('#nonveg').value = nonVegetarian;
}
update();
});
document.querySelector('#nonveg').addEventListener('change', function(e)
{
nonVegetarian = parseInt(document.querySelector('#nonveg').value, 10);
if(vegetarian + nonVegetarian > 4) // Make sure we never have more than 4 customers
{
vegetarian--;
document.querySelector('#veg').value = vegetarian;
}
update();
});
var update = function()
{
document.querySelector('#attending').innerText = vegetarian + nonVegetarian;
document.querySelector('#cost').innerText = (vegetarian*5) + (nonVegetarian *10);
};
update();
<form class="myForm" onsubmit="return validate();">
Meal Quantity Options: Vegetarian
<input id="veg" type="number" min="0" max="4" value="0" /><br />
Non-Vegetarian
<input id="nonveg" type="number" min="0" max="4" value="0" /><br />
<br />
<br> Number of people attending: <span id="attending"></span>
<br> Cost : $<span id="cost"></span>
<br />
</form>
I have a jquery that multiplies the price to quantity. Now I wanted to multiply the total of that to how many orders a costumer would place. Where would I insert my multiplication code? Here's how i envisioned the equation would be total=(price*quantity)*numberoforders. Here's a jfiddle of what I cant eloquently explain
Here's my code:
HTML
<form>
<ul>
<li>
<label>
<input type="checkbox" name="drink[]" class="drink" value="DrinkName1" data-price="12" /> Sample Item
<input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
</label>
</li>
<li>
<label>
<input type="checkbox" name="drink[]" class="drink" value="DrinkName2" data-price="6" /> Sample Item
<input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
</label>
</li>
<li>
<label>
<input type="checkbox" name="drink[]" class="drink" value="DrinkName3" data-price="4" /> Sample Item
<input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
</label>
</li>
<li>
<label>
Quantity of Orders
<input min="0" max="5" type="number" class="totalquant" name="quantity" value="1" />
</label>
</li>
</ul>
</form>
<p>Total</p>
<div id="totalDiv">0</div>
Jquery
$('.quantity, .drink').change(calculateTotal);
function calculateTotal() {
var $form = $(this).closest('form'), total = 0;
$form.find('.drink:checked').each(function() {
total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
});
$('#totalDiv').text(total)* parseInt($(this).siblings('.totalquant').val() || 0, 10);
}
Appreciate all the help
I've made some changes on your code here https://jsfiddle.net/k91d23p6/3/
Basically, you have to multiply the total by the totalQuant after the forEach.
//query the DOM once, instead of on every change
var $form = $('form'); //on a real app it would be better to have a class or ID
var $totalQuant = $('.totalquant', $form);
var totalDiv = $('#totalDiv');
$('.quantity, .drink, .totalquant', $form).change(calculateTotal);
function calculateTotal() {
var total = 0;
$form.find('.drink:checked').each(function() {
total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
});
var totalQuant = total * parseInt( $totalQuant.val() || 0, 10);
totalDiv.text(totalQuant);
}
How to multiply the Qty textbox with Price textbox then print the output on Subtotal textbox? And then add the grand total of Subtotal textboxes and print the sum on Total Price textbox with keypress event.
<ul>
<li>
Qty<input type="text" name="item_qty0" id="item_qty0" class="item_qty valid" onkeypress="return calProduct(this);" value="1" autocomplete="off" />
Price<input type="text" name="item_price0" id="item_price0" class="item_price valid" onkeypress="return calProduct(this);" value="0" autocomplete="off" />
Subtotal<input type="text" name="item_subtotal0" id="item_subtotal0" class="item_subtotal" disabled="" />
</li>
<li>
Qty<input type="text" name="item_qty1" id="item_qty1" class="item_qty valid" onkeypress="return calProduct(this);" value="1" autocomplete="off" />
Price<input type="text" name="item_price1" id="item_price1" class="item_price valid" onkeypress="return calProduct(this);" value="0" autocomplete="off" />
Subtotal<input type="text" name="item_subtotal1" id="item_subtotal1" class="item_subtotal" disabled="" />
</li>
</ul>
<hr />
<p style="text-align:right;">
Total Price<input name="total_price" maxlength="15" type="text" id="totalPrice" />
</p>
Demo
Here is The working DEMO http://jsfiddle.net/WLSND/
$("input").keyup(function(){
var total = 0;
$('.item_subtotal').each(function (index, element) {
var subtotal = parseInt($(this).parent().find(".item_qty").val())*parseInt($(this).parent().find(".item_price").val()) ;
$(this).val(subtotal);
total = total + subtotal;
});
$("#totalPrice").val(total);
$('input').keyup(function(){
var v = this.value, el = $(this);
if(!isNaN(v)){
var ov = el.siblings('.valid').val();
el.siblings().last().val(v*ov);
$(this).removeClass('nope').trigger('totalChange');
} else {
$(this).addClass('nope');
}
});
$(document).on('totalChange', function(){
var sub1 = parseFloat($('#item_subtotal').val(), 10);
var sub2 = parseFloat($('#item_subtotal2').val(), 10);
$('#totalPrice').val(sub1+sub2);
});
FIDDLE
I also made some changes in the HTML regarding IDs