How to call value and print on alert?

Question

saintrenz 0 Newbie Poster

14 Years Ago

I am making an menu list of starbucks the code is working but it only prints:

------
WELCOME TO STARBUCKS
Total Price: "amount"
------

Problem: I want the value to be displayed also in the alert box kinda like anyone help im a noob in js

------
WELCOME TO STARBUCKS
You ordered:
"items here"
Total Price: "amount"
-----

<html>
<head>
<script language="JavaScript">
function tester() {
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;



if(document.forms[0].elements[0].checked==true) {
a = 110
}
if(document.forms[0].elements[1].checked==true) {
b = 95
}
if(document.forms[0].elements[2].checked==true) {
c = 110
}
if(document.forms[0].elements[3].checked==true) {
d = 95
}
if(document.forms[0].elements[4].checked==true) {
e = 85
}

total = a + b + c + d + e 
{
alert("WELCOME TO STARBUCKS \n Total Price:" + total )
}
}
</script>

</head>
<body>

<center><h1>STARBUCKS</h1></center>
<form method="get" onsubmit="tester()">
<p><input type="checkbox" name="R1" value="Caramel Mochiato">Caramel Mochiato P110</p>
<p><input type="checkbox" name="R1" value="Caffe Latte">Caffe Latte P95</p>
<p><input type="checkbox" name="R1" value="White chocolate mocha">White chocolate mocha P110</p>
<p><input type="checkbox" name="R1" value="Caffe Mocha">Caffe Mocha P95</p>
<p><input type="checkbox" name="R1" value="Caffe Mocha">Cappuccino P85</p>
<div align="center"><p><input type="submit" value="ORDER"></p>
</div>
</form>
</body>
</html>

javascript

4 Contributors
5 Replies
151 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

lili.edryana 0 Light Poster

14 Years Ago

try this..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

    <script language="JavaScript" type="text/javascript">
function tester() {
    var a = 0;
    var b = 0;
    var c = 0;
    var d = 0;
    var e = 0;
    var menuVal="";



    if(document.menu.elements[0].checked==true) {
        menuVal += document.menu.elements[0].value + "\n";
    a = 110;
    }
    if(document.menu.elements[1].checked==true) {
        menuVal += document.menu.elements[1].value + "\n";
    b = 95
    }
    if(document.menu.elements[2].checked==true) {
        menuVal += document.menu.elements[2].value + "\n";
    c = 110
    }
    if(document.menu.elements[3].checked==true) {
        menuVal += document.menu.elements[3].value+ "\n";
    d = 95
    }
    if(document.menu.elements[4].checked==true) {
        menuVal += document.menu.elements[4].value+ "\n";
    e = 85
    }

    total = a + b + c + d + e 
    {
    alert("WELCOME TO STARBUCKS"+"\n\nYou ordered : \n"+menuVal+ "\n Total Price:" + total)
    }
    }
    </script>

    <title></title>
    <style type="text/css">
div.c1 {text-align: center}
    </style>
</head>

<body>
    <div class="c1">
        <h1>STARBUCKS</h1>
    </div>

    <form method="get" onsubmit="tester()" name="menu">
        <p><input type="checkbox" name="R1" value="Caramel Mochiato">Caramel Mochiato P110</p>

        <p><input type="checkbox" name="R1" value="Caffe Latte">Caffe Latte P95</p>

        <p><input type="checkbox" name="R1" value="White chocolate mocha">White chocolate mocha P110</p>

        <p><input type="checkbox" name="R1" value="Caffe Mocha">Caffe Mocha P95</p>

        <p><input type="checkbox" name="R1" value="Caffe Mocha">Cappuccino P85</p>

        <div class="c1">
            <p><input type="submit" value="ORDER"></p>
        </div>
    </form>
</body>
</html>

lili.edryana 0 Light Poster

13 Years Ago

it appends your string.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

wballinger 0 Newbie Poster · Answer 1 · 2010-11-16T09:29:22+00:00

When I tried this, it worked just fine. However, you may want to add a space after 'Total price:'

saintrenz 0 Newbie Poster · Answer 2 · 2010-11-17T21:18:05+00:00

thank you so much edryana what does += means btw?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-11-19T05:29:36+00:00

Or how about this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#menuWrapper {
	width:300px;
	padding:5px;
	border:2px dashed #336699;
}
#menuWrapper h1 {
	margin:0;
	color:#fff;
	background-color: #006699;
}
#menuWrapper h1, #menuWrapper .c1 { text-align: center; }
#menuWrapper p { margin: 6px 0; }
#menuWrapper form {
	margin: 0;
	padding: 0;
}
</style>
<script language="JavaScript" type="text/javascript">
function tester() {
	var total = 0;
	var divider = "-----------------------";
    var bill = [
		"WELCOME TO SHARKBITES",
		divider,
		"You ordered :"
	];
    for(var i=0; i<document.menu.elements.length-1; i++) {
		var el = document.menu.elements[i];
		if(el.checked) {
			bill.push("* " + el.value);
		    total += Number(el.getAttribute('price'));
	    }
	}
	if(bill.length === 3) { bill.push("Sweet nothing muchacho!"); }
	bill.push(divider);
	bill.push("Total Price : " + total);
	bill.push(divider);
	alert(bill.join("\n"));
	return false;
}
</script>
</head>

<body>
<div id="menuWrapper">
    <h1>SHARKBITES</h1>
    <form method="get" onsubmit="return tester()" name="menu">
        <p><input type="checkbox" id="ch0" name="ch0" value="Caramel Mochiato" price="110"><label for="ch0">Caramel Mochiato P110</label></p>
        <p><input type="checkbox" id="ch1" name="ch1" value="Caffe Latte" price="95"><label for="ch1">Caffe Latte P95</label></p>
        <p><input type="checkbox" id="ch2" name="ch2" value="White chocolate mocha" price="110"><label for="ch2">White chocolate mocha P110</label></p>
        <p><input type="checkbox" id="ch3" name="ch3" value="Caffe Mocha" price="95"><label for="ch3">Caffe Mocha P95</label></p>
        <p><input type="checkbox" id="ch4" name="ch4" value="Caffe Mocha" price="85"><label for="ch4">Cappuccino P85</label></p>
        <p class="c1"><input type="submit" value="ORDER"></p>
    </form>
</div>
</body>
</html>

Notes:

Loop avoids the need for repetative code.
The prices are stored as custom HTML attributes.
We build the bill in an array, then finally join the pieces together. This is much more efficient than string += string.
A little CSS smartens it up.

Airshow