View Single Post
Old 05-02-2011, 12:12 AM   PM User | #6
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,168
Thanks: 59
Thanked 3,993 Times in 3,962 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Here's an abbreviated, simplified, and corrected version of what I think you were after:
Code:
<html>
<head>
<script type="text/javascript">
function validateSelect(select)
{
    document.getElementById( select.name + "Lab" ).style.backgroundColor =
        ( select.selectedIndex == 0 ) ? "pink" : "transparent";
    return select.selectedIndex != 0;
}

function validateText(input)
{
    var text = input.value.replace(/\s/g,"");
    document.getElementById( input.name + "Lab" ).style.backgroundColor =
        ( text.length < 4 ) ? "pink" : "transparent";
    return text.length > 3;
}

function validateForm(form)
{
    var okay = validateSelect(form.product)
             & validateSelect(form.qty)
             & validateText(form.fname);
    if ( okay == 0 ) alert("Please correct the indicated errors");
    return okay != 0;
}
</script>
<body>
<form action="" onsubmit="return validateForm(this)" method="get">
<label id="productLab">1) Product
  <select name="product">
    <option value="">Select a Product</option>
    <option value="3.5">Green/Purple Fountain: $3.50 ea.</option>
    <option value="4.95">Silver Cone: $4.95 ea.</option>
    <option value="6.95">Glitter Cone: $6.95 ea.</option>
    <option value="9.95">Glittering Stars: $9.95 ea.</option>
    <option value="19.95">Fountain Kit: $19.95 ea.</option>
    <option value="29.95">Fountain Kit Deluxe: $29.95</option>
    <option value="39.95">Giant Fountain: $39.95</option>
  </select>
</label>
<br />
<label id="qtyLab">2) Quantity
  <select name="qty">
    <option value="">Select a Quantity</option>
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10">10</option>
  </select>  
</label>
<br/><br/>
<label id="fnameLab">4) First Name
  <input name="fname" size="20" type="text" />
</label>
<br/><br/>
<input type="submit" value="Submit Order" />
</form>

</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote