Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Arrays and Textarea

    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.
    Code:
    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
    Code:
    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
    Code:
    <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
    Code:
    <?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.

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Code:
     
    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

    Code:
     
    var meats = document.getElementsByName("meat");
    for(i=0;i<meats.length;i++){
    if(meats[i].checked==true){
    
    c= meats[i].value;
    meatCount++;
    }
    }
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help! Any idea on the second issue?

    EDIT: That didn't seem to fix it, same problem as before
    Last edited by snotrocket; 04-23-2008 at 03:45 AM.

  • #5
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    replace
    Code:
    write(
    with
    Code:
    document.getElementById("orderSummary").innerHTML = (
    and you should be good
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #6
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    change <br/> to \n
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #8
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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?
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #10
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well this page is for an assignment in college and the professor's notes say "You must use a for loop to process checkboxes."

  • #11
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #12
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    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
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #14
    New Coder
    Join Date
    Apr 2008
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    sorry we didn't quite get it hashed out man.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •