I've been trying to create an order form but haven't been able to get it right. The products being sold are customizable pizzas. so, users can select their crust from a select list, multiple topping from checkboxes. The tough part is getting multiple orders right. E.g. 1 pizza would have Crust A with topping B and topping C whilst another pizza would have Crust A but with Topping C and topping D. sorry for the bad phrasing. not sure how else to explain. I've been cracking my head over this. I don't have much knowledge in Javascript or PHP and mySQL. I have attempted to use javascript, php and my sql. they havent been working too well. Any suggestions?
My first suggestion is that you give us a link so we can look at the page. We can't give much advice if we don't know what we are commenting on.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript"> var crust=document.getElementsByName(crust); for (var crust = 0; crust < nodeList.length; crust++) { alert(nodeList[crust]); } var toppings=document.getElementsByName(toppings); for (var toppings = 0; toppings < nodeList.length; toppings++) { alert(nodeList[toppings]); } var pizza=[crust]; </script> </head> <body> <form> <table cellspacing="1" cellpadding="5" > <tr> <td>Pizza Crust</td> <td> <select name="crust" id="crust"> <option value="sgcrust">Singapore Crust</option> <option value="clsTcrust">Classic Thin Crust</option> <option value="nyccrust">New York Crust</option> <option value="chiccrust">Chicago Crust</option> <option value="chessycrust">Cheesy Crust</option> </select> </td> <td><script type="text/javascript"> document.write(pizza);</script> <tr> <td colspan="2" align="left"><b><u>Toppings</u></b></td> <tr> <td>Classics</td> <td> <input type="checkbox" name="toppings" id="toppings" value="peperoni">Peperoni</input> <input type="checkbox" name="toppings" id="toppings" value="sausage">Sausage</input> <input type="checkbox" name="toppings" id="toppings" value="pineapple">Pineapple</input> <input type="checkbox" name="toppings" id="toppings" value="peppers">Peppers(Combination of Red,Green, Yellow)</input> </td> <tr> <td>Seafood</td> <td> <input type="checkbox" name="toppings" id="toppings" value="prawn">Prawn</input> <input type="checkbox" name="toppings" id="toppings" value="squid">Squid</input> <input type="checkbox" name="toppings" id="toppings" value="crab">Crab</input> <input type="checkbox" name="toppings" id="toppings" value="mussels">Mussels</input> <input type="checkbox" name="toppings" id="toppings" value="scallop">Scallop</input> </td> <tr> <td>Meat</td> <td> <input type="checkbox" name="toppings" id="toppings" value="chicken">Chicken</input> <input type="checkbox" name="toppings" id="toppings" value="beef">Beef</input> <input type="checkbox" name="toppings" id="toppings" value="bacon">Bacon(Chicken/Turkey)</input> <input type="checkbox" name="toppings" id="toppings" value="ham">Ham(Chicken/Turkey)</input> </td> <tr> <td>Vegetarian</td> <td> <input type="checkbox" name="toppings" id="toppings" value="onion">Onion</input> <input type="checkbox" name="toppings" id="toppings" value="olive">Olive</input> <input type="checkbox" name="toppings" id="toppings" value="corn">Corn</input> <input type="checkbox" name="toppings" id="toppings" value="mushroom">Mushroom</input> </td> <tr> <td rowspan="2">Cheese</td> <td> <input type="checkbox" name="toppings" id="toppings" value="mozzarella">Mozzarella</input> <input type="checkbox" name="toppings" id="toppings" value="creamcheese">Cream Cheese</input> <input type="checkbox" name="toppings" id="toppings" value="provolone">Provolone</input> </td> <tr> <td> <input type="checkbox" name="toppings" id="toppings" value="parmesan">Parmesan</input> <input type="checkbox" name="toppings" id="toppings" value="bluecheese">Blue Cheese</input> <input type="checkbox" name="toppings" id="toppings" value="cheddar">Cheddar(Mixed with Mozzarella)</input> </td> <tr> <td><b><u>Desserts</u></b></td> <tr> <td>Syrups</td> <td> <input type="checkbox" name="toppings" id="toppings" value="chocosyrup">Chocolate Syrup</input> <input type="checkbox" name="toppings" id="toppings" value="strawsyrup">Strawberry Syrup</input> <input type="checkbox" name="toppings" id="toppings" value="vanilasyrup">Vanila Syrup</input> </td> <tr> <td rowspan="2">Crumbs/Fruits</td> <td> <input type="checkbox" name="toppings" id="toppings" value="chococook">Chocolate Cookie</input> <input type="checkbox" name="toppings" id="toppings" value="caramelcook">Caramel Cookie</input> <input type="checkbox" name="toppings" id="toppings" value="peanutcook">Peanut Cookie</input> <input type="checkbox" name="toppings" id="toppings" value="ginercook">Ginger Cookie</input> </td> <tr> <td> <input type="checkbox" name="toppings" id="toppings" value="banana">Banana</input> <input type="checkbox" name="toppings" id="toppings" value="strawberry">Strawberry</input> <input type="checkbox" name="toppings" id="toppings" value="mango">Mango</input> <input type="checkbox" name="toppings" id="toppings" value="apple">Apple</input> </td> <tr> <td colspan="2"> <input type="submit" name="submit" value="Place Order"></input> </td> </table> </form> </body> </html> HTML:
1) why are you using tables for layout. 2) Not sure what that document.write is even there to accomplish 3) if they all have the same name, how are you telling them apart on the server. 4) You don know you can't use the same ID more than once on a page, right? 5) Input is a standalone tag, you don't wrap CDATA with it that way, you use a LABEL tag with a FOR attribute to point AT the input by it's UNIQUE id. Basically there is NO SUCH THING as </input> 6) likewise with checkboxes there's usually no reason to give them a value. Of course, those last four make your javascript 100% nonsensical gibberish. Guessing WILDLY a quick rewrite of just PART of your markup would go something like this: <form action="someDamnedHandler.php" method="post"> <h2>Menu</h2> <fieldset> <label for="crust">Pizza Crust</label> <select name="crust" id="crust"> <option value="sgcrust">Singapore Crust</option> <option value="clsTcrust">Classic Thin Crust</option> <option value="nyccrust">New York Crust</option> <option value="chiccrust">Chicago Crust</option> <option value="chessycrust">Cheesy Crust</option> </select> </fieldset> <h3>Toppings</h3> <fieldset> <legend>Classics</legend> <input type="checkbox" name="toppings[pepperoni]" id="toppings_pepperoni" /> <label for="toppings_pepperoni">Pepperoni</label> <br /> <input type="checkbox" name="toppings[sausage]" id="toppings_pepperoni" /> <label for="toppings_pepperoni">Sausage</label> <br /> <input type="checkbox" name="toppings[pineapple]" id="toppings_pineapple" /> <label for="toppings_pineapple">Pineapple</label> <br /> <input type="checkbox" name="toppings[peppers]" id="toppings_peppers" /> <label for="toppings_peppers">Peppers(Combination of Red,Green, Yellow)</label> <br /> </fieldset> <fieldset> <legend>Seafood</legend> <input type="checkbox" name="toppings[prawn]" id="toppings_prawn" /> <label for="toppings_prawn">Prawn</label> <br /> <input type="checkbox" name="toppings[squid]" id="toppings_squid" /> <label for="toppings_squid">Squid</label> <br /> <input type="checkbox" name="toppings[crab]" id="toppings_crab" /> <label for="toppings_crab">Crab</label> <br /> <input type="checkbox" name="toppings[mussels]" id="toppings_mussels" /> <label for="toppings_mussels">Mussels</label> <br /> <input type="checkbox" name="toppings[scallop]" id="toppings_scallop" /> <label for="toppings_scallop">Scallop</label> </fieldset> Code (markup): Then SERVER SIDE (where form elements are SUPPOSED to be processed) in something like PHP you could just do "foreach ($_POST['toppings'])" to iterate through the toppings checkboxes. Though I have NO clue what you are trying to accomplish with this from either a markup or scripting standpoint... but I think you might want to keep in mind the unwritten rule of JavaScript, which should be considered Joe's own gospel when it comes to form design: "If you can't make the page work without scripting FIRST, you likely have no business adding scripting to it!"