动态表单附加字段答案

【问题标题】：Dynamic form additional fields动态表单附加字段
【发布时间】：2017-09-29 22:35:46
【问题描述】：

我一直在使用下面的 js fiddle 来做我需要的事情，但是我只需要给每个添加一个新的 id .. 有没有人有任何想法或指示？

谢谢。

<span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>

【问题讨论】：

标签： javascript jquery html css dynamic

【解决方案1】：

去控制台查看每个width的id

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[ id='+ room +']" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';
    
    objTo.appendChild(divtest)
}

div { padding:10px;}

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

       <div id="room_fileds">
           <div>
            <div class='label'>Room 1:</div>
            <div class="content">
                <span>Width: <input type="text" style="width:48px;" name="width[id=1]" value="" /><small>(ft)</small> X </span>
                <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span>
            </div>
           </div>
        </div>

【讨论】：

【解决方案2】：

length[] 和 width[] 可以正常工作 - 您将在 $_POST 中获得两个数组。然后，您可以执行以下操作：

foreach ($_POST['length'] as $key => $val) {
   echo "length: " . $_POST['length'][$key] . ", width: " . $_POST['width'][$key];
}

或者，如果您想让它们编号，您可以使用房间号变量“room”，为每个字段编号，例如：

divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content">';
divtest.innerHTML += '<span>Width: <input type="text" style="width:48px;" name="width_' + room +'" value="" /><small>(ft)</small> X</span>';
divtest.innerHTML += '<span>Length: <input type="text" style="width:48px;" namae="length_' + room +'" value="" /><small>(ft)</small></span>'
divtest.innerHTML += '</div>';

【讨论】：

应该增加的“房间”变量似乎没有添加到任何变量的过去 1？任何想法为什么会这样？
请检查更新的小提琴：jsfiddle.net/nj4N4/549 当我添加房间时，我看到（在源代码中）名为：width_1、width_2、width_3.. 的字段是你想要的还是你需要的还有什么？
请看小提琴： jsfiddle.net/nj4N4/551我们知道递增是作为成分1：文本框食物类型2：正在显示文本框，因此我只能假设名称出于某种原因不接受+room+？
@AliceB1 它也适用于“名称” - 您可以使用浏览器的开发人员工具检查生成的代码：或通过发布以这种方式生成的表单并在 PHP 中列出 $_POST 变量