Javascript複数のフォームフィールドを動的に追加する

Question

javascriptとPHPの新機能です。ユーザーがフィールドを追加してからフィールドを追加するオプションが必要なフォームを作成しています。

私は、このスクリプトを使用しています：

<script type="text/javascript"> 
    var counter = 1; 

    var limit = 3; 

    function addInput(divName){ 

     if (counter == limit) { 

       alert("You have reached the limit of adding " + counter + " inputs"); 

     } 

     else { 

       var newdiv = document.createElement('div'); 

       newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 

       document.getElementById(divName).appendChild(newdiv); 

       counter++; 

     } 

    } 
</script> 

エントリ1

をし、それが働いていますが、私は内側のHTMLでこのコードが必要

<label>Category <strong>*</strong></label> 
<font id=catname> 
<select name='catname'> 
<option value='0'>============</option> 
</select></font> 

<label>Item<strong>*</strong></label><font id=itemname> 
<select disabled='disabled' name='itemname'> 
<option value='0'></option> 
</select></font> 

どうすればこれらのフィールドを入力できますか？

完全なコード

<script type="text/javascript"> 
    var counter = 1; 

    var limit = 3; 

    function addInput(divName){ 

     if (counter == limit) { 

       alert("You have reached the limit of adding " + counter + " inputs"); 

     } 

     else { 

       var newdiv = document.createElement('div'); 

       newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 

       document.getElementById(divName).appendChild(newdiv); 

       counter++; 

     } 

    } 
</script> 
    <div class="form-style-5" style="margin-left: 360px;"> 
      <form name="form1" method="post" action="outgoingstocksave.php"> 
      <fieldset> 
      <legend><span class="number">&nbsp;</span> Outgoing Stocks Entry</legend> 
      <label>Ref. No.</label> 
      <input type="text" readonly="readonly" name="refno" value="<?php echo $refno; ?>"> 

      <div id="dynamicInput"> 
      <label>Category <strong>*</strong></label> 
       <font id=catname> 
       <select name='catname'> 
       <option value='0'>============</option> 
       </select></font> 

       <label>Item<strong>*</strong></label><font id=itemname> 
       <select disabled='disabled' name='itemname'> 
       <option value='0'></option> 
       </select></font> 

      <input type="number" name="quantity" maxlength="10" placeholder="ITEM QUANTITY *" required> 

      </div> 

      <input type="text" name="date" readonly="readonly" id="datepicker" placeholder="DATE *" required> 
      </fieldset> 
      <input type="submit" value="Save" /> 
     </form> 
     </div> 


<script language=Javascript> 
     function Inint_AJAX() { 
     try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE 
     try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE 
     try { return new XMLHttpRequest();   } catch(e) {} //Native Javascript 
     alert("XMLHttpRequest not supported"); 
     return null; 
     }; 

     function dochange(src, val) { 
     var req = Inint_AJAX(); 
     req.onreadystatechange = function() { 
     if (req.readyState==4) { 
     if (req.status==200) { 
      document.getElementById(src).innerHTML=req.responseText; //retuen value 
     } 
     } 
     }; 
    req.open("GET", "itemsfill.php?data="+src+"&val="+val); //make connection 
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header 
    req.send(null); //send value 
    } 

    window.onLoad=dochange('catname', -1);   // value in first dropdown 
</script> 

Answer 1

私は似たカップル年前に何かのテストをしました。あなたのニーズに合わせてハッキングできるかどうかを確認してください。

スクリプト...

<script type = "text/javascript"> 
    var cnt = 0; 

    function addFile() { 

     var div = document.createElement('DIV'); 
     div.innerHTML = '<input id="file' + cnt + '" name="file' + '' + '" type="file" />' + 
         '<input id="Button' + cnt + '" type="button" ' + 'value="X" onclick="deleteFile(this)" />'; 
     document.getElementById("uploadControls").appendChild(div); 
     cnt++; 
     buttonText(); 
    } 

    function deleteFile(div) { 

     document.getElementById("uploadControls").removeChild(div.parentNode); 
     cnt--; 
     buttonText(); 
    } 

    function buttonText() { 

     if (cnt > 0) { 
      document.myform.add_button.value = 'Add Another Attachment'; 
     } else { 
      document.myform.add_button.value = 'Add Attachment'; 
     } 
    } 
</script> 

HTML ...

<form name="myform" action="<your thing>" method="post" enctype="multipart/form-data" style="display:inline;"> 

<input id="add_button" type="button" value="Add Attachment" onclick="addFile()" /> 

<br /><br /> 

<div id="uploadControls"></div> 

<br/> 

<input type="submit" value="Submit" name="action"> 

</form>