Community Forums 

Main Content

Radio Buttons and Drop Down Menus

    Apr 09 2016 23:02:37

    #1

    LazyCarrot

    Join date : 2009-06-26      Posts : 52

    Well out of my depth trying to decipher and adapt some coding that I found on GT's Forms Page.
    I'm trying to provide an easy solution to allow a customer to select a Shirt in one of 3 colours and 5 sizes.
    GT had a form that provided for 2 radio buttons that, when clicked, generated separated drop down menus
    depending on which radio button was selected.
    I want to adapt that to provide for 3 radio buttons (representing the 3 colours).

    The adapted code below is as close as I've managed to get
    It's showing signs of getting there but I'm bogged down now
    I don't know enough about the nuts and bolts, and my intuition has reached its limit!

    Here are my principle problems with the code:

    1)
    I can get the first 2 radio buttons to behave in hiding/revealing their drop down menus
    but I can't figure out how to make the 3rd radio button behave with the other 2.
    By which I mean I can't even begin to figure out how to adapt the coding...
    Buttons 1 and 2 are coded to inspect each others status so logically all 3 buttons need to be coded
    to inspect the other 2 buttons also.
    You can see the behaviour I'm after by flicking between buttons 1 & 2 - I need that to work for button 3 as well.

    2)
    If I select a value from a drop-down menu and then click the add to basket button
    I get a Syntax Error Message saying 'price not entered'
    So the final submit isn't working either.
    In the past I've only ever used simple html buttons to submit data -
    using forms is beyond my knowledge and i can't figure where the data is being passed.

    **
    I have copied the coding as I currently have it below...
    Sorry I couldn't find a reference to the protocol when posting code -
    Guessing I should wrap it in some kind of tag to make it easier to identify but I couldn't find a reference..
    Hope it reads ok anyway.

    Any help would be much appreciated - can't see my way around this one!


    <!DOCTYPE html>
    <html>
    <body>

    <div id="maincontent">

    <br style="clear: left;">

    <form action="http://ww4.aitsafe.com/cf/add.cfm"; method="post">
    <input type="hidden" name="userid" value="E9999999">
    <input type="hidden" name="return" value="www.lazycarrot.co.uk/index.html">;

    White
    <input type="radio" name="white" value="1" onClick="document.getElementById('white').style.display=(document.getElementById('white').style.display=='block')?'none':'block';document.getElementById('ashgrey').style.display='none';this.form['ashgrey'].checked=(this.form['ashgrey'].checked=0)?1:0;">
    <input type="hidden" name="thumb" value="logo.png">

    Ash Grey
    <input type="radio" name="ashgrey" value="1" onClick="document.getElementById('ashgrey').style.display=(document.getElementById('ashgrey').style.display=='block')?'none':'block';document.getElementById('white').style.display='none';this.form['white'].checked=(this.form['white'].checked=0)?1:0;">
    <input type="hidden" name="thumb2" value="logo.png">

    Natural
    <input type="radio" name="natural" value="1" onClick="document.getElementById('natural').style.display=(document.getElementById('natural').style.display=='block')?'none':'block';document.getElementById('white').style.display='none';this.form['qty3'].checked=(this.form['qty3'].checked=0)?1:0;">
    <input type="hidden" name="thumb3" value="logo.png">


    <div id="white" style="display:none">
    White Select Size: <select name="productpr1">
    <option selected="" value="">Select Size</option>
    <option value="White Small:11.99">White Small</option>
    <option value="White Medium:11.99">White Medium</option>
    <option value="White Large:11.99">White Large</option>
    <option value="White X-Large:11.99">White X-Large</option>
    <option value="White 2X-Large:11.99">White 2X-Large</option>
    </select>
    </div>

    <div id="ashgrey" style="display:none">
    Ash Grey Select Size: <select name="productpr2">
    <option selected="" value="">Select Size</option>
    <option value="Ash Grey Small:11.99">Ash Grey Small</option>
    <option value="Ash Grey Medium:11.99">Ash Grey Medium</option>
    <option value="Ash Grey Large:11.99">Ash Grey Large</option>
    <option value="Ash Grey X-Large:11.99">Ash Grey X-Large</option>
    <option value="Ash Grey 2X-Large:11.99">Ash Grey 2X-Large</option>
    </select>
    </div>

    <div id="natural" style="display:none">
    Natural select Size: <select name="productpr3">
    <option selected="" value="">Select Size</option>
    <option value="Natural Small:11.99">Natural Small</option>
    <option value="Natural Medium:11.99">Natural Medium</option>
    <option value="Natural Large:11.99">Natural Large</option>
    <option value="Natural X-Large:11.99">Natural X-Large</option>
    <option value="Natural 2X-Large:11.99">Natural 2X-Large</option>
    </select>
    </div>

    <p>&nbsp; </p>

    <input type="submit" value="Add to Basket">

    </form>

    </div>

    </body>
    </html>



    Apr 10 2016 00:41:18

    #2

    Debbie Q

    Join date : 2008-09-18      Posts : 4994

    Why are you making it so difficult? What I see is one product with 3 colors and 5 sizes all the same price. All you need is a standard form with 2 drop down menus.

    <form action="http://ww4.aitsafe.com/cf/add.cfm";; method="post">
    <input type="hidden" name="userid" value="E9999999">
    <input type="hidden" name="return" value="www.lazycarrot.co.uk/index.html">;
    <input type="hidden" name="price" value="11.99">
    <input type="hidden" name="product[]" value="Shirt">


    <select name="product[]" size="1">
    <option selected value="">Select Color</option>
    <option value="White">White</option>
    <option value="Ash">Ash</option>
    <option value="Natural">Natural</option>
    </select>

    <select name="product[]" size="1">
    <option selected value="">Select size</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="2XL">2XL</option>
    </select>

    <input type="submit" value="Add to Basket">
    </form>

    Debbie Q

    Mal's Support: www.mals-e.com/support.php
    GT's Forms and examples: www.malsforms.com
    Helpful java scripts: www.gemasana.com/mals
    Shipping help documents: www.stoner.org.uk/mals

    My Create-A-Book Publishing - mycreateabook.com
    Personalized Books, Music CDs and Gifts for all ages and occasions.

    Please help me out and share my site on your networks.




    Apr 10 2016 09:04:31

    #3

    LazyCarrot

    Join date : 2009-06-26      Posts : 52

    Boy, do I love making life complicated for myself.... :)
    That is such an elegant solution compared to my convoluted contraption.

    Many Thanks Debbie - now I can get back to laying out my website.