NOP Design

by **Noahcs** » Mon Mar 14, 2011 5:40 am

I have a clothing store with shirts. I have setup the cart with the additionalinfo button with three choices "Small" "Medium" and "Large". For each item, the choices in the drop down box are as follows:

1.SELECT ONE
2.Small
3.Medium
4.Large

I want to make it so the customer cannot continue if they forget to select a size and leave the drop down box on "SELECT ONE". I want them to select a size before they click "add to cart". How can I do this?

by **Koibito** » Mon Mar 14, 2011 1:19 pm

You can check when the onsubmit event is thrown by checking either the value (set it to -1) or by checking the selectedIndex.

Code: Select all: <html><head><title></title> <script type="text/javascript"> function validateDropDown() { var ddl = document.getElementById('ddl'); if(ddl.selectedIndex == 0 || ddl.options[ddl.selectedIndex].value == -1) { alert('select another option!'); return false; } return true; } </script> </head><body> <form onsubmit="return validateDropDown('ddl');"> <select id="ddl"> <option value="-1">--- Please Select ---</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="submit" /> </form> </body></html>

by **Noahcs** » Mon Mar 14, 2011 2:24 pm

I've tried several things, but I can't get it to work. How do I incorporate what you just gave me?

Code: Select all: <tr> <TD width=313 align="center" height="304"> <IMG src="images/shirt1.png" width=222 height=250 align="center"></TD> <TD width=374 height="304" align="left"> <font face="Verdana" size="6"><a name="2"></a>Go For The Gold</font><p align="left"> <font face="Tahoma" style="font-size: 20pt">$10.00<br> </font> <font face="Tahoma" style="font-size: 3pt"> </font><font size="4"><br> Shipping: $6.99</font></p> <FORM onsubmit=AddToCart(this); name=order><font size="4">Quantity: <INPUT onchange=this.value=CKquantity(this.value) value=1 maxLength=3 size=2 type=text name=QUANTITY><br>Choose Size:  <select id="dd1" name=ADDITIONALINFO> <option value="-1">Select A Size <option value="S">S <option value="M">M <option value="L">L <option value="XL">XL <option value="XXL">XXL</select> </font><BR><BR> <INPUT border=0 value="Add to Cart" align=top src="images/add.png" type=image width="158" height="29" name="I4"> <INPUT value=10.00 type=hidden name=PRICE> <INPUT value="Go for the Gold T-Shirt" type=hidden name=NAME> <INPUT value=GOLD type=hidden name=ID_NUM> <INPUT value=6.99 type=hidden name=SHIPPING> <font face="Tahoma">       </font> <a href="#Top"> <img border="0" src="images/top.png" width="158" height="29"></a></FORM> </TD> </tr>

by **Koibito** » Mon Mar 14, 2011 4:25 pm

Since you're already using an OnSubmit(), you can do the other one with an OnClick():

Code: Select all: <html><head><title></title> <script type="text/javascript"> function validateDropDown() { var ddl = document.getElementById('ddl'); if(ddl.selectedIndex == 0 || ddl.options[ddl.selectedIndex].value == -1) { alert('select another option!'); return false; } return true; } </script> </head><body> <form> <select id="ddl"> <option value="-1">--- Please Select ---</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="submit" onClick="return validateDropDown('ddl');"> </form> </body></html>

Or combine the two:

return validateDropDown('ddl') && AddToCart(this)

by **Noahcs** » Mon Mar 14, 2011 9:14 pm

Thanks. It worked.

Are you aware that your "l"s look the same as the number one?

Code: Select all: l vs 1 First is the letter Second is the number

NOP Design

Disallow First Option on AdditionalInfo Drop Down Boxes

Disallow First Option on AdditionalInfo Drop Down Boxes

Re: Disallow First Option on AdditionalInfo Drop Down Boxes

Re: Disallow First Option on AdditionalInfo Drop Down Boxes

Re: Disallow First Option on AdditionalInfo Drop Down Boxes

Re: Disallow First Option on AdditionalInfo Drop Down Boxes

Who is online