Oscommerce please select size

  • raz0rblade
  • Born
  • Born
  • raz0rblade
  • Posts: 2

Post 3+ Months Ago

Hello I would be really grateful if someone who knows a bit about Javascript could help me with a problem I am having.

Basically I am developing a clothing store and currently OSCommerce is allowing things to be added to the store basket from the products info page even if a user has not selected a size (S,M,L etc), which is the only product attribute being utilised.

I would like to bring up a popup javascript error telling a user to select a size, if they forget to do so when they add a product to the basket from the products_info.php page.


I came across this script but i am not sure if it works and were i should put it so i hope some of you can lend this sweet little girl a hand ;-).


Code: [ Select ]
function dropDown(var)      {          if(var.id[2].options[var.id[2].selectedIndex].value == '')          {              alert("Please select a size");             return false;             }          else          {          return true;             }         }


thanks for your help in advance.

Much love and big kisses

Megan
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You need to place something to accomplish this on the submit. Have a look at this simplified example:

Code: [ Select ]
<html>
    <head>
        <script language="JavaScript">
            function checkInput(sel)
            {
                if(document.getElementById(sel).selectedIndex == 0) {
                    alert("Please select a size.");
                    return false;
                } else {
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <form id="myForm" method="Post" action="about&#058;blank" />
            <select id="size" name="size">
                <option value="" selected></option>
                <option value="S">Small</option>
                <option value="M">Medium</option>
                <option value="L">Large</option>
                <option value="XL">XL</option>
                <option value="XXL">XXL</option>
            </select>
            <input type="Submit" value="Submit" onClick="checkInput('size');return false;" />
        </form>
    </body>
</html>
  1. <html>
  2.     <head>
  3.         <script language="JavaScript">
  4.             function checkInput(sel)
  5.             {
  6.                 if(document.getElementById(sel).selectedIndex == 0) {
  7.                     alert("Please select a size.");
  8.                     return false;
  9.                 } else {
  10.                     return true;
  11.                 }
  12.             }
  13.         </script>
  14.     </head>
  15.     <body>
  16.         <form id="myForm" method="Post" action="about&#058;blank" />
  17.             <select id="size" name="size">
  18.                 <option value="" selected></option>
  19.                 <option value="S">Small</option>
  20.                 <option value="M">Medium</option>
  21.                 <option value="L">Large</option>
  22.                 <option value="XL">XL</option>
  23.                 <option value="XXL">XXL</option>
  24.             </select>
  25.             <input type="Submit" value="Submit" onClick="checkInput('size');return false;" />
  26.         </form>
  27.     </body>
  28. </html>


However - This still allows users with javascript disabled to submit without validation. If you need to prevent that, then you would swap to this:

Code: [ Select ]
<html>
    <head>
        <script language="JavaScript">
            function checkInput(sel)
            {
                if(document.getElementById(sel).selectedIndex == 0) {
                    alert("Please select a size.");
                    return false;
                } else {
                    document.getElementById('myForm').submit();
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <form id="myForm" method="Post" action="about&#058;blank" />
            <select id="size" name="size">
                <option value="" selected></option>
                <option value="S">Small</option>
                <option value="M">Medium</option>
                <option value="L">Large</option>
                <option value="XL">XL</option>
                <option value="XXL">XXL</option>
            </select>
            <input type="button" value="Submit" onClick="checkInput('size');" />
        </form>
    </body>
</html>
  1. <html>
  2.     <head>
  3.         <script language="JavaScript">
  4.             function checkInput(sel)
  5.             {
  6.                 if(document.getElementById(sel).selectedIndex == 0) {
  7.                     alert("Please select a size.");
  8.                     return false;
  9.                 } else {
  10.                     document.getElementById('myForm').submit();
  11.                     return true;
  12.                 }
  13.             }
  14.         </script>
  15.     </head>
  16.     <body>
  17.         <form id="myForm" method="Post" action="about&#058;blank" />
  18.             <select id="size" name="size">
  19.                 <option value="" selected></option>
  20.                 <option value="S">Small</option>
  21.                 <option value="M">Medium</option>
  22.                 <option value="L">Large</option>
  23.                 <option value="XL">XL</option>
  24.                 <option value="XXL">XXL</option>
  25.             </select>
  26.             <input type="button" value="Submit" onClick="checkInput('size');" />
  27.         </form>
  28.     </body>
  29. </html>
  • analyzatechnologies
  • Born
  • Born
  • analyzatechnologies
  • Posts: 2

Post 3+ Months Ago

you can validate it during form submission.

Code: [ Select ]
<form onsubmit="return checkSize(this)"></form>

function checkSize(obj) {
if(obj.selectedIndex==0) {
    alert("Please choose size.");
    return false;
} else
    return true;
}
  1. <form onsubmit="return checkSize(this)"></form>
  2. function checkSize(obj) {
  3. if(obj.selectedIndex==0) {
  4.     alert("Please choose size.");
  5.     return false;
  6. } else
  7.     return true;
  8. }

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.