...
PDA

Javascript Arrays and Textarea

snotrocket
04-23-2008, 02:15 AM
Ok, so I am making a form which asks for pizza information, then reports it in a textarea at the bottom. I have two problems with this so far.

The input for the type of toppings the person gets is in two sections using checkboxes. One for meat, one for vegetables. I have a problem storing the type of topping they want. An example is here.

for(i=0;i<myForm.meat.length;i++){
if(myForm.meat[i].checked==true){

c= myForm.meat[i].value;
meatCount++;
}
}


When I use that code, it only reports the last checkbox entered.

The second problem is with the textarea. That is where I want to output the information that has been calculated. So far I use

write("baseprice: " + pizzaType + ":" + pizzaPrice + "<br/>"
+ "meat toppings: " + c + " " + meatCount + " x " + meatToppingPrice + " = " + meatPrice + "<br/>"
+ "veg. toppings: " + d + " " + veggieCount + " x " + veggieToppingPrice + " = " + veggiePrice + "<br/>"
+ "total of toppings: " + totalToppingPrice + "<br/>"
+ "total price: " + totalPrice);


This above code outputs the information, but on a separate page.

I tried using

<textarea id="orderSummary" name="summary" rows="5" cols = "50">
<script>
write("baseprice: " + pizzaType + ":" + pizzaPrice + "<br/>"
+ "meat toppings: " + c + " " + meatCount + " x " + meatToppingPrice + " = " + meatPrice + "<br/>"
+ "veg. toppings: " + d + " " + veggieCount + " x " + veggieToppingPrice + " = " + veggiePrice + "<br/>"
+ "total of toppings: " + totalToppingPrice + "<br/>"
+ "total price: " + totalPrice);
</script>
</textarea>

but that just output exactly what is inside the <textarea> lines.

My entire code is

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Assignment 8</title>

</head>

<body>

<script>

function next(){
with(document){
meatCount=0;
veggieCount=0;
veggieToppingPrice=1.5;
pizzaPrice=0;
meatToppingPrice=0;
if(forms[0].elements[0].checked==true){
b=forms[0].elements[0].value;
pizzaPrice=10;
pizzaType="medium";
}

else if(forms[0].elements[1].checked==true){
b=forms[0].elements[1].value;
pizzaPrice=13;
pizzaType="large";
}

for(i=0;i<myForm.meat.length;i++){
if(myForm.meat[i].checked==true){

c= myForm.meat[i].value;
meatCount++;
}
}

for(i=0;i<myForm.veggie.length; i++){
if(myForm.veggie[i].checked==true){
d=myForm.veggie[i].value;
veggieCount++;
}
}

if(forms[0].elements[0].checked==true){
meatToppingPrice=1.5;
}

else if(forms[0].elements[1].checked==true){
meatToppingPrice=3;
}

meatPrice=meatToppingPrice*meatCount;
veggiePrice=veggieToppingPrice*veggieCount;
totalToppingPrice=meatPrice+veggiePrice;
totalPrice=0;
write("baseprice: " + pizzaType + ":" + pizzaPrice + "<br/>"
+ "meat toppings: " + c + " " + meatCount + " x " + meatToppingPrice + " = " + meatPrice + "<br/>"
+ "veg. toppings: " + d + " " + veggieCount + " x " + veggieToppingPrice + " = " + veggiePrice + "<br/>"
+ "total of toppings: " + totalToppingPrice + "<br/>"
+ "total price: " + totalPrice);
}
}

</script>

<form id="myForm" name="myForm">
<p>
Choose pizza size:<br />
<input type="radio" value="m" name="size"/> medium($10)<br />
<input type="radio" value="l" name="size"/> large($13)
</p>
<p>meats: $1.50/topping for medium; $3/topping for large<br />
veggies: $1.50/topping for medium and large</p>
<hr/>

<table border="0">
<tr>
<th>pepperoni</th>
<th>sausage</th>
<th>bacon</th>
<th>hamburger</th>
<th>ham</th>
</tr>

<tr>
<th><input type="checkbox" value="pepperoni" name="meat"/></th>
<th><input type="checkbox" value="sausage" name="meat"/></th>
<th><input type="checkbox" value="bacon" name="meat"/></th>
<th><input type="checkbox" value="hamburger" name="meat"/></th>
<th><input type="checkbox" value="ham" name="meat"/></th>
</tr>

<tr>
<th>mushrooms</th>
<th>onions</th>
<th>peppers</th>
<th>tomato</th>
<th>olives</th>
</tr>

<tr>
<th><input type="checkbox" value="mushrooms" id="veggie" name="m"/></th>
<th><input type="checkbox" value="onions" id="veggie" name="o"/></th>
<th><input type="checkbox" value="peppers" id="veggie" name="pep"/></th>
<th><input type="checkbox" value="tomato" id="veggie" name="t"/></th>
<th><input type="checkbox" value="olives" id="veggie" name="ol"/></th>
</tr>

</table>

<hr/>

<input type="button" value="Calculate Order" onclick="next()"/>
<input type="reset" value="Reset Form"/>

<p>order summary:</p>

<textarea id="orderSummary" name="summary" rows="5" cols = "50"></textarea>

</form>

</body>

</html>


Thank you so much for your help.
mjlorbet
04-23-2008, 02:29 AM
var i = 0;
while(myForm["meat" + i]{
if(myForm["meat" + i].checked){
c= myForm["meat" + i].value;
meatCount++;
}
i++;
}


change name="meat" to id="meat0" and meat1, etc. on each of you elements.
or you can do


var meats = document.getElementsByName("meat");
for(i=0;i<meats.length;i++){
if(meats[i].checked==true){

c= meats[i].value;
meatCount++;
}
}
mjlorbet
04-23-2008, 02:32 AM
sorry, for some reason my browser's hanging when i click the edit button, but the second code block could be implemented without having to modify your markup
snotrocket
04-23-2008, 02:39 AM
Thanks for the help! Any idea on the second issue?

EDIT: That didn't seem to fix it, same problem as before :(
mjlorbet
04-23-2008, 02:44 AM
replace write( with document.getElementById("orderSummary").innerHTML = ( and you should be good
snotrocket
04-23-2008, 02:48 AM
Well that fixed my textarea problem, but now the textarea outputs

baseprice: large:$13<br/>meat toppings: hamburger 2 x $3 = $6<br/>veg. toppings: tomato 2 x $1.5 = $3<br/>total of toppings: $9<br/>total price: $22

Anyway to make <br/> actually do a line break?
mjlorbet
04-23-2008, 02:49 AM
change <br/> to \n
snotrocket
04-23-2008, 02:53 AM
Just found that via a google and was about to post but you beat me to it. ;)

The solution to the first problem ended up giving me the exact same problem. I unfortunately have to do the checking of meat items with a for loop. Do you have any other ideas for how to make it include all the meats?
mjlorbet
04-23-2008, 02:57 AM
why is it that you can't do the checking in a loop? trying to inline everything into html element event defs or is there some other restriction that might effect a possible solution?
snotrocket
04-23-2008, 02:58 AM
Well this page is for an assignment in college and the professor's notes say "You must use a for loop to process checkboxes."
mjlorbet
04-23-2008, 03:00 AM
the second solution i offered in the first post uses a for loop and can be used with the elements with name attributes as they were originally posted
snotrocket
04-23-2008, 03:03 AM
Yes but what I'm trying to say is that it doesn't fix the problem. It outputs the exact same output as my original code.
mjlorbet
04-23-2008, 03:07 AM
if you're getting the same value in c each time, it's because you're assigning directly to it each time, if you want to append each result use c += your_variables_name + ",";

and clear c (c="") before each time the code is run so that the results from each run don't pile up
snotrocket
04-23-2008, 03:26 AM
Hmm, never quite got it working and had to turn it in. Thank you very much for the help MJ, will give me something to argue with my professor about tomorrow.
mjlorbet
04-23-2008, 03:28 AM
sorry we didn't quite get it hashed out man.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum