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>

Javascript动态添加多个表单字段

1 个答案: