表單不能識別通過javascript生成的新輸入字段

Question

我正在開發一個php站點。

我有一些問題，我的形式

我有一個以上的軟件包在同一時間。

所以我用JavaScript來追加文件和下拉到我的HTML。

我每次點擊一個鏈接時都會調用ajs函數來添加新的輸入字段。

及其正確顯示。

但它在我的操作頁面中沒有標識。

我不能把我通過javascript函數創建的新輸入字段的值。

下面是我已經使用的代碼頁。

<script language="JavaScript"> 

function addInput(divName){ 

    var newsel= document.createElement('div'); 
     newsel.innerHTML="<div style='padding-left:55px;padding-top:10px';>Operating System: <select name='frm_os1' id='test1' ><option value=''>--Select OS--</option><optgroup label='Spind Enabled'> </optgroup><option value='bc_linux'>&nbsp;&nbsp;&nbsp;bc_linux</option><optgroup label='Packages'> </optgroup><option value='Linux'>&nbsp;&nbsp;&nbsp;Linux</option><option value='Solaris'>&nbsp;&nbsp;&nbsp;Solaris</option><option value='2000/XP/Vista'>&nbsp;&nbsp;&nbsp;2000/XP/Vista</option><option value='XP/Vista'>&nbsp;&nbsp;&nbsp;XP/Vista</option><option value='2K/XP/Vista/W7'>&nbsp;&nbsp;&nbsp;2K/XP/Vista/W7</option><option value='HP'>&nbsp;&nbsp;&nbsp;HP</option><option value='Windows 2000/XP/Vista zip'>&nbsp;&nbsp;&nbsp;Windows 2000/XP/Vista zip</option><option value='Windows 2000/XP/Vista exe'>&nbsp;&nbsp;&nbsp;Windows 2000/XP/Vista exe</option><option value='X Server - 2.2M'>&nbsp;&nbsp;&nbsp;X Server - 2.2M</option><option value='Fonts - 32.9M'>&nbsp;&nbsp;&nbsp;Fonts - 32.9M</option></select></div>"; 
     document.getElementById(divName).appendChild(newsel); 

      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = "<div style='padding-left:40px;padding-top:10px';>Upload Software File: <input type='file' name='frm_image1' class='text_area'></div>"; 
      document.getElementById(divName).appendChild(newdiv); 

} 



</script> 
</HEAD> 

              <form action="act-add-software.php" method="post" onSubmit="return validate(this);" enctype="multipart/form-data"> 




                <select name="frm_os" class="text_area" style="width:200px"> 
                 <option value="">--Select OS--</option> 
                  <optgroup label="Spind Enabled"> </optgroup> 
                  <option value="bc_linux">&nbsp;&nbsp;&nbsp;bc_linux</option> 
                  <optgroup label="Packages"> </optgroup> 
                  <option value="Linux">&nbsp;&nbsp;&nbsp;Linux</option> 
                  <option value="Solaris">&nbsp;&nbsp;&nbsp;Solaris</option> 
                  <option value="2000/XP/Vista">&nbsp;&nbsp;&nbsp;2000/XP/Vista</option> 
                  <option value="XP/Vista">&nbsp;&nbsp;&nbsp;XP/Vista</option>                
                  <option value="2K/XP/Vista/W7">&nbsp;&nbsp;&nbsp;2K/XP/Vista/W7</option>                
                  <option value="HP">&nbsp;&nbsp;&nbsp;HP</option>                
                  <option value="Windows 2000/XP/Vista zip">&nbsp;&nbsp;&nbsp;Windows 2000/XP/Vista zip</option>               
                  <option value="Windows 2000/XP/Vista exe">&nbsp;&nbsp;&nbsp;Windows 2000/XP/Vista exe</option> 
                  <option value="X Server - 2.2M">&nbsp;&nbsp;&nbsp;X Server - 2.2M</option> 
                  <option value="Fonts - 32.9M">&nbsp;&nbsp;&nbsp;Fonts - 32.9M</option>                                             
                  </select> 
                  <a onClick="addInput('dynamicInput');">Add More Package</a> </td> 
                </td> 
               </tr> 
               <tr> 
                <td colspan="2"><table border="0" cellpadding="0" cellspacing="0"> 
                 <tr align="center" valign="middle" class="tbl_row1"> 

                 <td height="25" align="left" class="font1" width="156" bgcolor="White"><div align="right"> 
                  <?if(strstr($frm_server_side_error,'frm_software')){?> 
                  <font class="error"><b> <font color="#dd0000">*</font>&nbsp;Upload Software File: </font> 
                  <?}else{?> 
                  <font class="form_element"> <font color="#dd0000">*</font>&nbsp;Upload Software File: 
                  <?}?> 
                  </div> 
                  </B> </td> 

                 <td class="font1" bgcolor="White" align="center" style="padding-left:2px;"><input type="file" name="frm_image[]" class="text_area"> 
                 </td> 
                 <?if($frm_sfile !=""){?> 
                 <td class="font1" bgcolor="White" align="center"></td> 
                 <?}else{?> 
                 <td class="font1" bgcolor="White" align="center">&nbsp;(Current File: NOT Uploaded Yet) </td> 
                 <?}?> 
                 </tr> 
                </table></td> 
               </tr> 

               <tr> 
               <td colspan="2"> 
               <div id="dynamicInput"> 
               </div> 
               </td> 
               </tr> 

              </form> 

要查看我已經包含了這個代碼頁的簡單性，才需要行代碼

請幫我解決這個問題

Answer 1

這是因爲<input type='file' name='frm_image1' class='text_area'>使用一個靜態名稱。

因此，每個致電addInput()的電話都很好地創建了所有元素，全部共享相同的名稱。

要輕鬆解決這個問題，您可以在名稱後附加一個迭代器並將其存儲在全局範圍中。

var iterator=0; 

function addInput(){ 
    var name = 'inputElementName'+(iterator++); 
    // etc... 
}