I have a sort of e-commerce in which you have multiple choice:
the first is by clicking some buttons to change the price of an object.
the second are checkboxes for some services in addition to the first choice (so I can have tot price= button+checkboxes)
Until here it's all good.
Finally, I have a range slider input to calculate the load, and I want that the max range to be = to the total price that is displayed in a div with id="aaa"
As you can see in the code or jsfiddle, the max price doesn't change like the aaa div (the max value remains = 5000)
how can I change it dynamically?
//checkboxes and buttons
var basicPrice = 5000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
console.log(currentPrice)
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" +this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#aaa").text((currentPrice + total).toFixed(2));
$("#serv").html("services: " + services.join(", "));
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click",function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
//slider
$(document).ready(function(){
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount){
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount){
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<br><br><br>
<div class="paragraph" id="prezzo">
200 €</div>
<br><br><br>
<div class="info-text-wrapper">
<p class="info-paragraph black" id="aaa"></p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >0</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>
Working fiddle.
You need to update the max attribute of slider inside your getCheck() function like :
document.getElementById('slider1').max = currentPrice;
//checkboxes and buttons
var basicPrice = 5000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" + this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#aaa").text((currentPrice + total).toFixed(2));
$("#serv").html("services: " + services.join(", "));
document.getElementById('slider1').max = (currentPrice + total).toFixed(2);
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click", function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
//slider
$(document).ready(function() {
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount) {
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount) {
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<br><br><br>
<div class="paragraph" id="prezzo">
200 €</div>
<br><br><br>
<div class="info-text-wrapper">
<p class="info-paragraph black" id="aaa"></p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1" />
<div class="info-paragraph black" type="text" id="mutuo">0</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni">10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>
Related
I need to to enter a new value( the standard manufacturing thickness(SMT)) and divid it on /48 then check if the answer < 135 display (pass) if not display (Enter higher value) I tried if else statement but it doesn't work
and also I want to display the (the standard manufacturing thickness(SMT=)) text input side by side with the MAOP(psi)= text input.
<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>
<h2>Enter inputs</h2>
<label for="P">MAOP(psi)=</label>
<input type="number" id="P">
<br>
<label for="D=">Do(in)=</label>
<input type="number" id="D">
<br>
<label for="SMYS">SMYS(psi)=</label>
<input type="number" id="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF">
<br>
<label for="T">T=</label>
<input type="number" id="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E">
<br>
<button type="submit" id="calculate">calculate</button>
<br>
<label for="total">Wall Thickness(in)=</label>
<input type="number" id="total" readonly>
<br>
<label for="SMT">Standerd Manufacturing Thickness (in)=</label>
<input type="number" id="SMT">
<br>
<button type="submit" id="check">Check</button>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var P = +document.getElementById("P").value;
var D = +document.getElementById("D").value;
var SMYS = +document.getElementById("SMYS").value;
var DF = +document.getElementById("DF").value;
var T = +document.getElementById("T").value;
var E = +document.getElementById("E").value;
var SMT = +document.getElementById("SMT").value;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
var Check= (SMT / 48);
function myFunction() {
document.getElementById("Check").value = Check;
}
if (SMT / 48 < 135) {
console.log("pass");
} else {
console.log("enter higher value");
}
});
</script>
</body>
I have two functions like this:
1:
$(".soma").blur(function(){
var total = 0;
$(".soma").each(function(){
total = total + Number($(this).val().replace(/\s/g, ''));
});
$("#sub").val(total);
});
2:
$(".soma1").blur(function(){
var total1 = 0;
$(".soma1").each(function(){
total1 = total1 + Number($(this).val().replace(/\s/g, ''));
});
$("#sub1").val(total1);
});
I need to get the difference between the two and put the value in the input in real time.
My code that doesn't work:
$(".soma").blur(function(){
var total4 = 0;
$(".soma").each(function(){
total4 = total4 + Number($(this).val().replace(/\s/g, ''));
});
$(".soma1").blur(function(){
$(".soma1").each(function(){
total5 = total5 + Number($(this).val().replace(/\s/g, ''));
});
total6 = total4 - total5;
$("#sub1").val(total6.toFixed(2));
});
});
HTML:
<div class="form-group col-xs-1">
<input type="text" class="form-control1 Preco soma" name="Valor[]" value="0.00" required>
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Valor">Total</label>
</div>
<div class="form-group col-xs-2">
<input type="text" class="form-control1 Preco soma1" name="Compra[]" value="0.00" required>
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Compra">Valor de Compra</label>
</div>
<div class="form-group col-xs-4" style="float:right; margin-right: 2%; line-height: 2;">
<input type="text" class="form-control1" name="sub" id="sub3" readOnly="true" value="">
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="sub3">Diferença em Valor</label>
</div>
I don't just click on a function because they are two different sums.
Just do both calculations in one change.
$(".soma1, .soma").blur(function(){
var total1 = 0;
var total = 0;
$(".soma1").each(function(){
total1 = total1 + Number($(this).val().replace(/\s/g, ''));
});
$(".soma").each(function(){
total = total + Number($(this).val().replace(/\s/g, ''));
});
console.log(total - total1);
});
I have 2 html pages which are for a laundry services website and I have a javascript file. The first html page is called booking page where user get to book the number of clothes to be washed and it automatically calculate the total amount to be paid. Now on the second html page which is the summary page, I want the same amount on the booking page to reflect on the summary page showing the total amount and also also the buttons (plus and minus button) adding to it in the summary page.
I tried using localStorage for this project and I couldn't figure it out.
Skirt(s)</p>
<div>
<p>
<button type="button" class="sub" data-
target="skirts">−</button>
<input type="text" value="0"
class="field_skirts" />
<button type="button" class="add" data-
target="skirts">+</button>
<p class="display_skirts" name="price"
max="3" min="1">₦ 0</p>
</p>
</div>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/blouse.png" /></div>
<p class="second-booking-container-icon"
name="product" value="100" id="qnty_4">
Blouse(s)</p>
<div>
<p>
<button type="button" class="sub" data-
target="blouses">-</button>
<input type="text" value="0"
class="field_blouses" />
<button type="button" class="add" data-
target="blouses">+</button>
<p class="display_blouses" name="price"
max="3" min="1">₦ 0</p>
</p>
</div>
</div>
<div>
<div class="second-booking-container-image"><img
src="./img/jacket.png" /></div>
<p class="second-booking-container-icon-long"
name="product" value="100" id="qnty_5">Suit/Jacket(s)
</p>
<p>
<button type="button" class="sub" data-
target="suits">-</button>
<input type="text" value="0" class="field_suits"
/>
<button type="button" class="add" data-
target="suits">+</button>
<p class="display_suits" name="price" max="3"
min="1">₦ 0</p>
</p>
</div>
</div>
<div class="third-booking-container">
<p>Total:₦ <span id="totalValue"></span></p>
<button>Set pick up date
<FontAwesomeIcon class="second-container-button-right"
icon="angle-right" /></button>
</div>
</div>
var subElm = document.querySelectorAll('.sub');
var addElm = document.querySelectorAll('.add');
var totalValueElm = document.getElementById('totalValue');
for (var i = 0; i < subElm.length; i++) {
subElm[i].addEventListener('click', function () {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' + targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
if (currentValue !== 0) {
var incValue = currentValue - 1;
var strValue = ' ' + incValue;
inputElm.setAttribute('value', incValue);
// displayElm.innerHTML = "₦" + strValue;
displayElm.innerHTML = "₦ " + incValue * 100;
totalValueElm.innerText = Number(totalValueElm.innerText) -
100;
}
});
addElm[i].addEventListener('click', function () {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' + targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
var incValue = currentValue + 1;
var strValue = ' ' + incValue;
inputElm.setAttribute('value', incValue);
// displayElm.innerHTML = "₦" + strValue;
displayElm.innerHTML = "₦ " + incValue * 100;
totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
});
}
<div class="summaryContainer">
<div class="summaryNavBar"><p
className="summaryTitle">Summary</p></div>
<div class="summaryContent">
<p class="total" id="total">Total:</p>
<p class="sum">₦0.00</p>
</div>
<div class="summaryCard">
<div class="summary-card-title">
<div>Item</div>
<div>Quantity</div>
</div>
<div class="summary-card-content">
<div >Shirt(s)</div><div id="
first" class="summary-quantity"><button type="button"
id="sub" class="sub">−</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
</div>
<div class="summary-card-content">
<div>Trouser(s)</div>
<div class="summary-quantity" id="second">
<button type="button" id="sub" class="sub">−</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
</div>
<div class="summary-card-content" id="third">
I want the total calculation of price on the booking page to also appear at the summary page when I automatically click on summary page
In your booking page, store the total price in local storage using localStorage.setItem().
localStorage.setItem('totalPrice', JSON.stringify(totalValue));
In your summary page, access this total price using localStorage.getItem().
var totalPrice = JSON.parse(localStorage.getItem('totalPrice'));
Note that all the values are stored as strings, so you have to use JSON.parse() to convert the string back to the object or value.
I have a range slider and I want the max range to be set dynamically from the html text of a div with class="aaa". unfortunately it doesn't not work. And maybe I have some error in the var = zzz that sets the max value..
Here's my code
var zzz = document.getElementById('aaa').val();
document.getElementById('slider1').max = zzz;
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount){
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount){
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<div class="info-text-wrapper">
<p class="info-paragraph black" val="123456" id="aaa">123456</p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step="10" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >10000</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>
val() is used in jQuery, For javascript you need to use value
In javascript if you want the input value then use
document.getElementById('aaa').value
Instead of
document.getElementById('aaa').val()
If you want text of element you can use
document.getElementById('aaa').innerHTML
OR
document.getElementById('aaa').innerText
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount) {
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount) {
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-text-wrapper">
<p class="info-paragraph black" val="123456" id="aaa">123456</p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step="10" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >10000</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>
val() function only fetches the value of input elements. In order to get the text of other elements, you need to use innerHTML or innerText. Just replace
var zzz = document.getElementById('aaa').val();
with
var zzz = document.getElementById('aaa').innerText;
It should work.
I have the following html code:
I want to calculate the price associated with each checked box and display it in a text area after i click order (button). Pls help!
<div>
<form>
<fieldset > <legend>Resturant Menu:</legend>
<input type="checkbox" id = "menu" value="300">
<label> Chicken-------------------------- 300 AFN</label> <br>
<input type="checkbox" id = "menu" value="200">
<label> Chicken Baryani --------------- 200 AFN</label> <br>
<input type="checkbox" id = "menu" value="250">
<label> Chicken Kabab ----------------- 250 AFN</label> <br>
<input type="checkbox" id = "menu" value="100">
<label> Juice ----------------------------- 100 AFN</label> <br>
<input type="submit" id = "submit_btn" onclick = "calculate()">
</fieldset>
</form>
</div>
This is usually not how it works on StackOverflow, you have to try fixing it yourself. However, I'm bored so here is a solution with HTML + Javascript.
It is bad practice to declare multiple ids with the same name, use classes instead. I changed your code a little bit. You said you want to display the code in another field, so using a form for this is not necessary.
var menuItems = document.getElementsByClassName('menuItem');
var orderButton = document.getElementById('order_btn');
var totalArea = document.getElementById('total');
var afn = 0;
orderButton.addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < menuItems.length; i++) {
if (menuItems[i].checked) {
afn += +menuItems[i].value;
}
}
totalArea.innerHTML = "Total: " + afn + " AFN";
afn = 0;
});
<div>
<fieldset>
<legend>Resturant Menu:</legend>
<input type="checkbox" class="menuItem" value="300">
<label>Chicken-------------------------- 300 AFN</label>
<br>
<input type="checkbox" class="menuItem" value="200">
<label>Chicken Baryani --------------- 200 AFN</label>
<br>
<input type="checkbox" class="menuItem" value="250">
<label>Chicken Kabab ----------------- 250 AFN</label>
<br>
<input type="checkbox" class="menuItem" value="100">
<label>Juice ----------------------------- 100 AFN</label>
<br>
<button id="order_btn">Order</button>
</fieldset>
<p id="total">Total: 0 AFN</p>
</div>
function calculate(){
var allMenuItem = $('#menuItem input[type=checkbox]');
var totalPrice = 0;
$.each(allMenuItem, function(key, element){
if($(this).is(":checked")){
totalPrice += parseFloat($(this).val());
}
});
alert("You order price is: "+ totalPrice + " Rs");
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form>
<fieldset > <legend>Resturant Menu:</legend>
<div id="menuItem">
<input type="checkbox" id = "menu" value="300">
<label> Chicken-------------------------- 300 AFN</label> <br>
<input type="checkbox" id = "menu" value="200">
<label> Chicken Baryani --------------- 200 AFN</label> <br>
<input type="checkbox" id = "menu" value="250">
<label> Chicken Kabab ----------------- 250 AFN</label> <br>
<input type="checkbox" id = "menu" value="100">
<label> Juice ----------------------------- 100 AFN</label> <br>
<input type="button" value="Order" id = "submit_btn" onclick = "calculate()">
</div>
</fieldset>
</form>