How to call value and print on alert?

lili.edryana 0 Light Poster · 2010-11-15T00:36:31+00:00

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>

wballinger 0 Newbie Poster · 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 · 2010-11-17T21:18:05+00:00

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

lili.edryana 0 Light Poster · 2010-11-18T23:13:54+00:00

it appends your string.

Airshow 416 WiFi Lounge Lizard Team Colleague · 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