Javascript Dynamic Dropdown Box validation

[prasath03]

Hi,

I need a JavaScript Validation for Dynamic Drop Down Box when clicking the submit button. But the drop down box attribute name and id should be same for all drop down boxes. I tried below code but its not succeeded, its work well when there are multiple drop down box but its does not work when there is only one drop down box. Please help me for find out this problem or give me any suggestion without changing of attribute name and id of drop down box.

<script type="text/javascript">
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
function payNow()
    {

    var freeColor = document.checkout.free_prod_color;
    var colorCount = 0;
    var sizeCount = 0;
    for(var j=0;j<document.checkout.free_prod_color.length;j++) {
    if(freeColor[j].value.trim()=="")  {
        colorCount++;
    }
    }
    if(colorCount>=1) {
        alert("Please select color for FREE product");
        return false;
    }
    }
  </script>
  <form name="checkout" action="checkout.jsp" method="post">
  <table>
  <tr class="free" title="Free Product">
  <td height="30" valign="top" class="list_cell">Max Shirt<input type="hidden" name="free_prod_name" value="Max Shirt" /></td>

  <td valign="top" class="list_cell">
  <select name="free_prod_color" id="free_prod_color">
  <option value="">Select Color</option>
  <option value="73">2Tone Blue</option><option value="74">Army Green</option><option value="75">Asparagus</option><option value="77">Bengal Tiger</option><option value="78">Black</option><option value="79">Black Pink</option><option value="80">Blue Gray</option><option value="81">Blue Leopard</option><option value="82">Camou</option><option value="83">Camou 2</option><option value="84">Camou Blue</option><option value="85">Camou Green</option><option value="86">Charcoal</option><option value="87">Dreamy Blue</option><option value="88">Flaming Heart</option><option value="89">Florence</option><option value="90">Gray</option><option value="91">Hunter Green</option><option value="97">Jade</option><option value="92">Leopard</option><option value="93">Mosaic</option><option value="94">Myrtle</option><option value="95">Olive</option><option value="96">Olive Dew</option><option value="98">Purple Pink</option><option value="99">Raspberry Swirl</option><option value="100">Silver</option><option value="101">Yellow Green Dream</option>

  </select>  </td>
  <td colspan="2" valign="top" class="list_cell" id="peeko_send_0"><select name="free_prod_size" id="free_prod_size"><option value="">Select Size</option><option value="">XL</option><option value="">M</option></select></td>
  <td valign="top" class="list_cell">&nbsp;</td>
  <td align="right" valign="top" class="list_cell">1&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>

</tr>

<!-- <tr class="free" title="Free Product">
  <td height="30" valign="top" class="list_cell">Maxim<input type="hidden" name="free_prod_name" value="Maxim" /></td>
  <td valign="top" class="list_cell">
  <select name="free_prod_color" id="free_prod_color">
  <option value="">Select Color</option>
  <option value="73">2Tone Blue</option><option value="74">Army Green</option><option value="75">Asparagus</option><option value="77">Bengal Tiger</option><option value="78">Black</option><option value="79">Black Pink</option><option value="80">Blue Gray</option><option value="81">Blue Leopard</option><option value="82">Camou</option><option value="83">Camou 2</option><option value="84">Camou Blue</option><option value="85">Camou Green</option><option value="86">Charcoal</option><option value="87">Dreamy Blue</option><option value="88">Flaming Heart</option><option value="89">Florence</option><option value="90">Gray</option><option value="91">Hunter Green</option><option value="97">Jade</option><option value="92">Leopard</option><option value="93">Mosaic</option><option value="94">Myrtle</option><option value="95">Olive</option><option value="96">Olive Dew</option><option value="98">Purple Pink</option><option value="99">Raspberry Swirl</option><option value="100">Silver</option><option value="101">Yellow Green Dream</option>

  </select>  </td>
  <td colspan="2" valign="top" class="list_cell" id="peeko_send_1"><select name="free_prod_size" id="free_prod_size"><option value="">Select Size</option><option value="">XL</option><option value="">M</option></select></td>
  <td valign="top" class="list_cell">&nbsp;</td>
  <td align="right" valign="top" class="list_cell">1&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>

</tr>
 --></table>
  <br><br>
  <input type="submit" name="aa2" alt="PayPal" value="Pay Now with PayPal" onclick="return payNow()" />
    </form>

Thanks in Advance,

Arjunan.

[Airshow]

Prasath03, try this:

function payNow() {
  var el;
  el = document.checkout.free_prod_color;
  if(el.selectedIndex === 0) {
    alert("Please select color for FREE product");
    return false;
  }
  el = document.checkout.free_prod_size;
  if(el.selectedIndex === 0) {
    alert("Please select size for FREE product");
    return false;
  }
  return true;
}

Airshow

[Airshow]

Also ...

I'm not sure that <input type="submit" ... onclick="return payNow()"> will suppress form submission in all browsers.

It's safer to validate from the form tag, <form ... onsubmit="return payNow()"> . That's my preferred approach anyway.

EDIT: Yes, my recollection appears to be correct. This page confirms. Use <form ... onsubmit="return payNow()"> .

Airshow