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>