如何用相同名称的多个字段对HTML进行分组

Question

当用户单击“添加更多”时，我会继续添加多个设备，但是如何将来自此表单的每个设备的名称与数组相同的多个字段分组，我的服务器端语言是PHP。

<form>
<div class="row">
  <div class="col-md-12">
    <div class="widget stacked">
      <div class="widget-header">
        <i class="icon-hdd"></i>
        <h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
      </div>
      <div class="widget-content">
        <div class="form-group">
          <label for="device_name">Device Name</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_description">Device Description</label>
          <input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_url">Device Url</label>
          <input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
        </div>
        <div class="form-group">
          <label for="device_ip4">IP4</label>
          <input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_ip6">IP6</label>
          <input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
        </div>
        <div class="form-group">
          <label for="device_username">Device Username</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
        </div>
        <div class="form-group">
          <label for="device_password">Device Password</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="widget stacked">
      <div class="widget-header">
        <i class="icon-hdd"></i>
        <h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
      </div>
      <div class="widget-content">
        <div class="form-group">
          <label for="device_name">Device Name</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_description">Device Description</label>
          <input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_url">Device Url</label>
          <input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
        </div>
        <div class="form-group">
          <label for="device_ip4">IP4</label>
          <input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_ip6">IP6</label>
          <input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
        </div>
        <div class="form-group">
          <label for="device_username">Device Username</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
        </div>
        <div class="form-group">
          <label for="device_password">Device Password</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="widget stacked">
      <div class="widget-header">
        <i class="icon-hdd"></i>
        <h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
      </div>
      <div class="widget-content">
        <div class="form-group">
          <label for="device_name">Device Name</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_description">Device Description</label>
          <input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_url">Device Url</label>
          <input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
        </div>
        <div class="form-group">
          <label for="device_ip4">IP4</label>
          <input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_ip6">IP6</label>
          <input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
        </div>
        <div class="form-group">
          <label for="device_username">Device Username</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
        </div>
        <div class="form-group">
          <label for="device_password">Device Password</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
        </div>
      </div>
    </div>
  </div>
</div>
</form>

Answer 1

将您的字段命名为devices[0][description]、devices[1][description]等。

如果每个对象都有相同数量的字段，并且每个字段都是一个新记录--您可以使用devices[][description]，浏览器将为您填充索引，但如果您决定使用相同的表单编辑记录，那么将来可能会出现错误。

还请参见How to get form input array into PHP array