SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Option value with a blank space

    I would like to have a blank space to separate the options in the "Select Color/Size drop down box" I would also like to have an alert('Please select a size'); show up if someone chooses the blank space. I have tried to do this but my attempts have been fruitless so far. Any help would be great.

    p.s. If you notice any other glaring mistakes please let me know.

    Thanks,
    Kevin
    Code:
    <script>
    function Validate()
    {
     if(document.getElementById('size').selectedIndex < 1)
     {
        alert('Please select a size');
        return;
     }
     SetDesc ('shirt');
     SetCode ('ts00014');
     SetImg ('images/cartimage/shirt.gif');
     SetPcat (2);
     if (ReadForm (document.sizeform, true))
     CallView ();
     ClearAll ();
    
     document.sizeform.submit();
    }
          </script>
              <div id="enlarge">
              <div id="selectsize">
    <form method="post" name="sizeform">
                    1.
                    <input type="hidden" name="initer" value=" @0" />
                <select id="size" size="1" name="size">
                  <option selected value="Select a size">Select Color/Size</option>
                  <option value = "White Small @17.95">White Small</option>
                  <option value = "White Medium @17.95">White Medium</option>
                  <option value = "White Large @17.95">White Large</option>
                  <option value = "White X-L @17.95">White XL</option>
                  <option value = "White 2XL @19.95">White 2X ($2)</option>
    			  <option value=""></option>
    			  <option value = "Army Small @17.95">Army Small</option>
                </select>
                <a href="#" class="style5" onClick="window.open('sizechart.html', 200, 200, ''); return false"> Size Chart</a>
                <div id="sizechart"><span class="style6">2.</span>  Choose a Quantity:  
                  <input type  = "text"
             name  = "qty"
             value = "1"
             size  = "4" />
                </div>
                    <div id="numbform">3.
                      <input name="button" type="button" onClick="Validate();" value="add to cart" alt="">
    </div>
    </form>

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can space out your options list with empty optgroups. They take can't be selected, but will double space your menu.

    <select id="size" size="1" name="size">
    <option selected value="Select a size">Select Color/Size </option>
    <optgroup> </optgroup>
    <option value = "White Small @17.95">White Small</option>
    <optgroup> </optgroup>
    <option value = "White Medium @17.95">White Medium</option>
    <optgroup> </optgroup>
    <option value = "White Large @17.95">White Large</option>
    <optgroup> </optgroup>
    <option value = "White X-L @17.95">White XL</option>
    <optgroup> </optgroup>
    <option value = "White 2XL @19.95">White 2X ($2)</option>
    <optgroup> </optgroup>
    <option value = "Army Small @17.95">Army Small</option>
    </select>

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks, I didn't know about "optgroup"


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
  •