動的ドロップダウンボックスの有効化

Question

送信ボタンをクリックすると、動的ドロップダウンボックスのJavaScript検証が必要です。ドロップダウンボックスの属性名とIDは、すべてのドロップダウンボックスで同じにする必要があります。私はコードの下で試してみましたが成功しませんでしたが、複数のドロップダウンボックスがある場合でもうまく動作しますが、ドロップダウンボックスが1つしかない場合は動作しません。この問題を見つけるために私を助けてください、またはドロップダウンボックスの属性名とIDを変更せずに私に提案をしてください。事前に

<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> 

おかげで、

Prasath。

Answer 1

同じIDを使用しないでください。 jQueryを使用して機能を変更する：

function payNow() 
{ 
    var sameEmpty = false; 
    $("select").each(function() { 
     if (this.value == "") 
     { 
      sameEmpty = true; 
      break; 
     } 
    }); 

    if(sameEmpty) { 
     alert("Please select color for FREE product"); 
     return false; 
    } 

    return true; 
}