Question

我创建了一个php页面，客户可以在其中输入他们转入部门的计算机组件的详细信息。有关名称，部门，电子邮件，电话，评论和他们输入的每个组件的详细信息列表，如型号，标签号和项目描述。

一位客户可以一次退回任意数量的组件。截至目前，我的页面一次需要3个组件详细信息，所以我想放置一个“添加更多”按钮，以便客户每次有越来越多的组件可以点击时添加更多按钮。

        <td width="33%"><label class="description" for="email">Manufacturer, Model, Serial # <br />
        </label>
        <p class="guidelines" id="guide_2"><small>Please add some details for larger items such as "Dell Precision 5550 Serial number 123456789".</small></p> </td>
        <td width="33%"><label class="description" for="element_10">Tag Number (If Any) <br/></label>
        <div>
  <p class="guidelines" id="guide_9"><small>If the item has an Tag Number, please include it here.</small></p> </div> </td>
        <td width="33%"><label class="description" for="element_4">Item Description </label>
    <div>
      <p class="guidelines" id="guide_9"><small>You can group smaller items together and list them as "Box of 20 Mice".</small></p>
      </div></td>
      </tr>

      <tr>
        <td width="33%"><input id="element_5" name="1model" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input id="element_10" name="1tag" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input name="1descrip" type="text" class="element text large" id="element_6" value="" /></td>
      </tr>
      <tr>
        <td width="33%"><input id="element_7" name="2model" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input id="element_8" name="2tag" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input name="2descrip" type="text" class="element text large" id="element_9" value="" /></td>
      </tr>
      <tr>
        <td width="33%"><input id="element_11" name="3model" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input id="element_12" name="3tag" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input name="3descrip" type="text" class="element text large" id="element_13" value="" /></td>
      </tr>

Answer 1

因此，在输入命名方面，您正在展示一种非常常见的反模式。您永远不应该命名类似的输入，例如model1，model2等。（请注意，在任何情况下，您都不应该在名称中首先使用数字）。在输入名称中增加数值的任何内容都应被视为红色标记。

您要做的是在命名中使用数组访问表示法。因此，请将您的输入命名为：

<!-- First set -->
<input name="tag[]" ... />
<input name="descrip[]" ... />
<input name="model[]" ... />

<!-- Second and all future sets exactly the same -->
<input name="tag[]" ... />
<input name="descrip[]" ... />
<input name="model[]" ... />

当您的表单发布到PHP时，PHP会自动将所有带有[]的常用命名输入组合到一个数组中。因此，例如，如果您执行了var_dump($_POST['tag']);，您可能会看到类似的内容：

Array(
    0 => "tag 0 value",
    1 => "tag 1 value",
    ...
)

这使得迭代POSTed数据非常容易。

对于“添加更多”，您只需使用javascript来克隆表的现有行（或克隆隐藏的“模板”行）并将行附加到表的相应DOM位置。

在PHP表单中添加更多字段并提交

1 个答案: