SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a little help figuring this one out...

    Hello,

    The problem I'm having with this one is in the function, with the FOR I've hilited. This is a test pizza ordering application, where I have checkboxes for the different toppings. There are 3 buttons, ( I bet you guys have all seen this at one time or another!), for either Veggie, Meat or Hawaiian, and, depending on which botton is clicked, the appropriate check boxes should be automatically filled in. I have that part working; however, my intention with that FOR is to clear all the checkboxes before the user makes an entry, so that, when they change their mind, the boxes that have previously been checked are first cleared. ( Or, more accurately, ALL the boxes are cleared). Instead, what's happening is that no matter what choice I make, all the boxes wind up being checked. Can you tell me what's wrong?

    Thanks!,
    Jeff S

    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Pizza</title>
    <script type = "text/javascript">
    function flip(pizzatype) {
    for (var i=0; i<7; i++) {
    document.forms["pizzaform"].toppingcheck[i].checked="false";
    }
    if (pizzatype.value=="Veggie Special") {
    document.forms["pizzaform"].topping.value = "veggies";
    document.forms["pizzaform"].toppingcheck[3].checked="checked";
    document.forms["pizzaform"].toppingcheck[4].checked="checked";
    document.forms["pizzaform"].toppingcheck[5].checked="checked";
    } else if (pizzatype.value=="Meat Special") {
    document.forms["pizzaform"].topping.value = "meat";
    document.forms["pizzaform"].toppingcheck[0].checked="checked";
    document.forms["pizzaform"].toppingcheck[1].checked="checked";
    document.forms["pizzaform"].toppingcheck[2].checked="checked";
    } else if (pizzatype.value=="Hawaiian") {
    document.forms["pizzaform"].topping.value = "hampineapple";
    document.forms["pizzaform"].toppingcheck[6].checked="checked";
    document.forms["pizzaform"].toppingcheck[2].checked="checked";
    }
    }

    </script>
    </head>
    <body>
    <form id="pizzaform" action="#" onsubmit="return false;">
    <p>

    <input type="button" name="veggiespecial" onclick = "flip(veggiespecial)"
    value="Veggie Special" />
    <input type="button" name="meatspecial" onclick = "flip(meatspecial)"
    value="Meat Special" />
    <input type="button" name="hawaiian" onclick = "flip(hawaiian)"
    value="Hawaiian" />

    </p>
    <p>Main Topping: <select name="topping">
    <option value="cheese" selected="selected">Cheese</option>
    <option value="veggies">Veggies</option>
    <option value="meat">Meat</option>
    <option value="hampineapple">Ham & Pineapples</option>
    </select></p>
    <p>Toppings</p>
    <p>
    <input type="checkbox" id="topping1" value = "Sausage"
    name="toppingcheck"/>Sausage<br/>
    <input type="checkbox" id="topping2" value = "Pepperoni"
    name="toppingcheck"/>Pepperoni<br/>
    <input type="checkbox" id="topping3" value = "Ham"
    name="toppingcheck"/>Ham<br/>
    <input type="checkbox" id="topping4" value = "Green Peppers"
    name="toppingcheck"/>Green Peppers<br/>
    <input type="checkbox" id="topping5" value = "Mushrooms"
    name="toppingcheck"/>Mushrooms<br/>
    <input type="checkbox" id="topping6" value = "Onions"
    name="toppingcheck"/>Onions<br/>
    <input type="checkbox" id="topping7" value = "Pineapple"
    name="toppingcheck"/>Pineapple<br/>
    </p>
    </form>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The string value "false" does not turn off the checkbox.

    You need to assign the boolean value of false instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works. I have modified some of your script to make use of the name attributes of the form element. Have a close look at the differences between your original script and this one to see what I have done.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     
    <head>
    <title>Pizza</title>
    <script type="text/javascript">
    <!--
    function flip(pizzatype) 
     {  // clear all boxes
         clearBoxes();
    //short cut to form 
     var myForm=document.pizzaform;
    //
     if (pizzatype=="veggiespecial")
      { myForm.topping.value = "veggies";
        myForm.toppingcheck[3].checked=true;
        myForm.toppingcheck[4].checked=true;
        myForm.toppingcheck[5].checked=true;
      } 
     else if (pizzatype=="meatspecial") 
      { myForm.topping.value = "meat";
        myForm.toppingcheck[0].checked=true;
        myForm.toppingcheck[1].checked=true;
        myForm.toppingcheck[2].checked=true;
      }
     else if (pizzatype=="hawaiian") 
      { myForm.topping.value = "hampineapple";
        myForm.toppingcheck[6].checked=true;
        myForm.toppingcheck[2].checked=true; 
       }
    }
    // ------------
    // clears all checked boxes
     function clearBoxes()
      { var i;
       var boxes=document.pizzaform.toppingcheck;
       for(i=0;i<boxes.length;i++)
        boxes[i].checked=false;
      }
    // ----------- 
    //-->
    </script>
    <style type="text/css">
    <!--
    #topDiv p { margin:0px; }
    -->
    </style>
    </head>
     
    <body>
     
    <form id="pizzaform" name="pizzaform" action="#" onsubmit="return false;">
      <p>
      <input type="button" name="veggiespecial" onclick="flip('veggiespecial')" value="Veggie Special" />
      <input type="button" name="meatspecial" onclick="flip('meatspecial')" value="Meat Special" />
      <input type="button" name="hawaiian" onclick="flip('hawaiian')" value="Hawaiian" />
      </p>
      <p>Main Topping: <select name="topping">
      <option value="cheese">Cheese</option>
      <option value="veggies">Veggies</option>
      <option value="meat">Meat</option>
      <option value="hampineapple">Ham &amp; Pineapples</option>
      </select></p>
      <p>Toppings</p>
      <div id="topDiv">
        <p class="a">
        <input type="checkbox" id="topping1" value="Sausage" name="toppingcheck" />Sausage</p>
        <p>
        <input type="checkbox" id="topping2" value="Pepperoni" name="toppingcheck" />Pepperoni</p>
        <p><input type="checkbox" id="topping3" value="Ham" name="toppingcheck" />Ham</p>
        <p>
        <input type="checkbox" id="topping4" value="Green Peppers" name="toppingcheck" />Green 
        Peppers</p>
        <p>
        <input type="checkbox" id="topping5" value="Mushrooms" name="toppingcheck" />Mushrooms</p>
        <p>
        <input type="checkbox" id="topping6" value="Onions" name="toppingcheck" />Onions</p>
        <p>
        <input type="checkbox" id="topping7" value="Pineapple" name="toppingcheck" />Pineapple</div>
      <!-- end topDiv -->
    </form>
     
    </body>
     
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I appreciate it. It WORKS! Allan, I didn't change it to the way you suggested; it essentially appeared to be the same thing I was already doing -- with the slight exception that you were doing it CORRECTLY! But, after making that string a boolean, it worked fine just the way I had it.

    Much appreciated!
    Jeff

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I'll stand up for Allen's improvements. While they don't have "getting it working" effect, they instead "get it working well".

    For example, instead of using this mouthful:
    Code:
    document.forms["pizzaform"].toppingcheck[5].checked="checked";
    document.forms["pizzaform"].toppingcheck[3].checked="checked";
    document.forms["pizzaform"].toppingcheck[4].checked="checked";
    document.forms["pizzaform"].toppingcheck[5].checked="checked";
    You can store a reference to the toppingcheck, and use that reference instead.
    Code javascript:
    var form = document.getElementById('pizzaform'),
        toppingcheck = form.elements.toppingcheck;

    From there, you only need to use toppingcheck instead of document.forms["pizzaform"].toppingcheck

    Code:
    toppingcheck[3].checked=true;
    toppingcheck[4].checked=true;
    toppingcheck[5].checked=true;
    It's a small improvement, and the immediate benefit may not be clear until you have made many small improvements, and then come back to it several months later.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lamiroh View Post
    If you plan to send the form data to a server side script, eg. php, the checkbox names will need [] in them like this otherwise the $_POST or $_GET won't see them.
    PHP will see them, but only the last value will be easily accessible. If the OP wants a useful reference, PHP has some good info on how to create arrays in an HTML <form>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all,,,I'm all for improved code! You guys are getting a little ahead of me on the server side stuff...I'll try and remember about the [] for PHP, but I haven't even started looking at any server-side yet -- I've done a beginners 500 page HTML/CSS book, and now a little over 1/2 way thru beginners javascript. Then I was thinking I might do another html/css and a little more advanced javascript, or maybe if I can just find some practice javascript apps I can try and write, just to get more comfortable with what I should already know before moving on to server side....


Bookmarks

Posting Permissions

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