i have a code which customize the price when user select options and it shows the last price on <div id="totalPrice" style="background:red;"></div>
i want to show that value on input tag as well how can i do it
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<body translate="no" >
<body onl oad='hideTotal()'>
<div id="wrap">
<form action="" id="cakeform" >
<div >
<fieldset>
<legend>Anchor price</legend>
<label for="">Size of the cake</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal() ">Round cake 6"- service 8 people ($20)
</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()"> Round cake 8" - service 12 people ($25)
</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()"> Round cake 10" - service 16 people ($35)
</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()"> Round cake 12" - service 30 people ($75)
</label> <br>
<br>
<label for="">Filling</label>
<select name="filling" id="filling" onchange="calculateTotal()">
<option value="None"> Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custed">Custed($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
</select> <br> <br>
<label for="">Anchor price: Tk 4.50 </label>
<select name="quantity" id="quantity" onchange="calculateTotal()">
<option value="0">Qnty</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>
<p>
<label for="includecandles" > Include Candles ($5)</label>
<input type="checkbox" id="includecandles" name="includecandles" onclick="calculateTotal()"/>
</p>
<p>
<label for="includeinscription">Include Inscription($20)</label>
<input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()">
</p>
<div id="totalPrice" style="background:red;"></div>
</fieldset>
</div>
<input type="submit" id="submit" value="Submit" onclick="calculateTotal()" style="margin-top: 5px;">
</form>
</div>
</body>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js" >
var cake_prices = new Array();
cake_prices["Round6"] = 20;
cake_prices["Round8"] = 25;
cake_prices["Round10"] = 35;
cake_prices["Round12"] = 75;
var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Lemon"] = 5;
filling_prices["Custed"] = 5;
filling_prices["Fudge"] = 7.9;
filling_prices["Mocha"] = 8;
var tenAnchorPrice = 4.50;
var Anchor_Quantity = new Array();
Anchor_Quantity["0"] = 0;
Anchor_Quantity["1"] = 1;
Anchor_Quantity["2"] = 2;
Anchor_Quantity["3"] = 3;
Anchor_Quantity["4"] = 4;
Anchor_Quantity["5"] = 5;
Anchor_Quantity["6"] = 6;
Anchor_Quantity["7"] = 7;
Anchor_Quantity["8"] = 8;
Anchor_Quantity["9"] = 9;
Anchor_Quantity["10"] = 10;
function getCakeSizePrice()
{
var cakeSizePrice = 0;
var theForm = document.forms["cakeform"];
var selectedCake = theForm.elements["selectedcake"];
for (var i = 0; i < selectedCake.length; i )
{if (window.CP.shouldStopExecution(0)) break;
if (selectedCake[i].checked)
{
cakeSizePrice = cake_prices[selectedCake[i].value];
break;
}
}window.CP.exitedLoop(0);
return cakeSizePrice;
}
function getFillingPrice()
{
var cakeFillingPrice = 0;
var theForm = document.forms["cakeform"];
var selectedFilling = theForm.elements["filling"];
cakeFillingPrice = filling_prices[selectedFilling.value];
return cakeFillingPrice;
}
//tttttttttttttttttttttttttt test tttttttttttttttttttttt
/*
function AnchorsPrice()
{
var AnchorPrice=0;
var theForm = document.forms["cakeform"];
var includeAnchorPrice= theForm.elements["tenAnchorPrice"];
if (includeAnchorPrice.checked==true) {
AnchorPrice=4.25;
};
return AnchorPrice;
}*/
function getAnchorQuantity()
{
var AnchorQuantity = 0;
var theForm = document.forms["cakeform"];
var selectedAnchor = theForm.elements["quantity"];
AnchorQuantity = Anchor_Quantity[selectedAnchor.value];
return AnchorQuantity;
}
//tttttttttttttttttttttttttt test tttttttttttttttttttttt
function candlesPrice()
{
var candlePrice = 0;
var theForm = document.forms["cakeform"];
var includeCandles = theForm.elements["includecandles"];
if (includeCandles.checked == true) {
candlePrice = 5;
};
return candlePrice;
}
function insciptionPrice()
{
var inscriptionPrice = 0;
var theForm = document.forms["cakeform"];
var includeInscription = theForm.elements["includeinscription"];
if (includeInscription.checked == true) {
inscriptionPrice = 20;
};
return inscriptionPrice;
}
function calculateTotal()
{
// var cakePrice= getCakeSizePrice() getFillingPrice() candlesPrice() insciptionPrice() ;
var cakePrice = getCakeSizePrice() getFillingPrice() candlesPrice() insciptionPrice() tenAnchorPrice * getAnchorQuantity();
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Total Price for the Cake $" cakePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'none';
}
//# sourceURL=pen.js
</script>
</body>
</html>
CodePudding user response:
var cake_prices = new Array();
cake_prices["Round6"] = 20;
cake_prices["Round8"] = 25;
cake_prices["Round10"] = 35;
cake_prices["Round12"] = 75;
var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Lemon"] = 5;
filling_prices["Custed"] = 5;
filling_prices["Fudge"] = 7.9;
filling_prices["Mocha"] = 8;
var tenAnchorPrice = 4.50;
var Anchor_Quantity = new Array();
Anchor_Quantity["0"] = 0;
Anchor_Quantity["1"] = 1;
Anchor_Quantity["2"] = 2;
Anchor_Quantity["3"] = 3;
Anchor_Quantity["4"] = 4;
Anchor_Quantity["5"] = 5;
Anchor_Quantity["6"] = 6;
Anchor_Quantity["7"] = 7;
Anchor_Quantity["8"] = 8;
Anchor_Quantity["9"] = 9;
Anchor_Quantity["10"] = 10;
function getCakeSizePrice() {
var cakeSizePrice = 0;
var theForm = document.forms["cakeform"];
var selectedCake = theForm.elements["selectedcake"];
for (var i = 0; i < selectedCake.length; i ) {
if (window.CP.shouldStopExecution(0)) break;
if (selectedCake[i].checked) {
cakeSizePrice = cake_prices[selectedCake[i].value];
break;
}
}
window.CP.exitedLoop(0);
return cakeSizePrice;
}
function getFillingPrice() {
var cakeFillingPrice = 0;
var theForm = document.forms["cakeform"];
var selectedFilling = theForm.elements["filling"];
cakeFillingPrice = filling_prices[selectedFilling.value];
return cakeFillingPrice;
}
//tttttttttttttttttttttttttt test tttttttttttttttttttttt
/*
function AnchorsPrice()
{
var AnchorPrice=0;
var theForm = document.forms["cakeform"];
var includeAnchorPrice= theForm.elements["tenAnchorPrice"];
if (includeAnchorPrice.checked==true) {
AnchorPrice=4.25;
};
return AnchorPrice;
}*/
function getAnchorQuantity() {
var AnchorQuantity = 0;
var theForm = document.forms["cakeform"];
var selectedAnchor = theForm.elements["quantity"];
AnchorQuantity = Anchor_Quantity[selectedAnchor.value];
return AnchorQuantity;
}
//tttttttttttttttttttttttttt test tttttttttttttttttttttt
function candlesPrice() {
var candlePrice = 0;
var theForm = document.forms["cakeform"];
var includeCandles = theForm.elements["includecandles"];
if (includeCandles.checked == true) {
candlePrice = 5;
};
return candlePrice;
}
function insciptionPrice() {
var inscriptionPrice = 0;
var theForm = document.forms["cakeform"];
var includeInscription = theForm.elements["includeinscription"];
if (includeInscription.checked == true) {
inscriptionPrice = 20;
};
return inscriptionPrice;
}
function calculateTotal() {
// var cakePrice= getCakeSizePrice() getFillingPrice() candlesPrice() insciptionPrice() ;
var cakePrice = getCakeSizePrice() getFillingPrice() candlesPrice() insciptionPrice() tenAnchorPrice * getAnchorQuantity();
var divobj = document.getElementById('totalPrice');
var displayTotal = document.getElementById('displayPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Total Price for the Cake $" cakePrice;
displayTotal.value = "$" cakePrice;
}
function hideTotal() {
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'none';
}
<!DOCTYPE html>
<html lang="en">
<body translate="no">
<body onl oad='hideTotal()'>
<div id="wrap">
<form action="" id="cakeform">
<div >
<fieldset>
<legend>Anchor price</legend>
<label for="">Size of the cake</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round6" onclick="calculateTotal() ">Round cake 6"- service 8 people ($20)
</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round8" onclick="calculateTotal()"> Round cake 8" - service 12 people ($25)
</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round10" onclick="calculateTotal()"> Round cake 10" - service 16 people ($35)
</label> <br>
<label for="" >
<input type="radio" name="selectedcake" value="Round12" onclick="calculateTotal()"> Round cake 12" - service 30 people ($75)
</label> <br>
<br>
<label for="">Filling</label>
<select name="filling" id="filling" onchange="calculateTotal()">
<option value="None"> Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custed">Custed($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
</select> <br> <br>
<label for="">Anchor price: Tk 4.50 </label>
<select name="quantity" id="quantity" onchange="calculateTotal()">
<option value="0">Qnty</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>
<p>
<label for="includecandles" > Include Candles ($5)</label>
<input type="checkbox" id="includecandles" name="includecandles" onclick="calculateTotal()" />
</p>
<p>
<label for="includeinscription">Include Inscription($20)</label>
<input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()">
</p>
<div id="totalPrice" style="background:red;"></div>
<input type="text" id="displayPrice">
</fieldset>
</div>
<input type="submit" id="submit" value="Submit" onclick="calculateTotal()" style="margin-top: 5px;">
</form>
</div>
</body>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
</body>
</html>
Hope this helps!