具有相同名称的多个输入

亚历山大·索洛玛卡（Aleksey Solomakha）

我有表单，用户可以在其中重复输入表单，并且单选按钮有麻烦。当我尝试使用时：

$('form').serialize();

在Chrome开发者工具中

我有：

"text-field%5B%5D=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2+%D0%98%D0%B2%D0%B0%D0%BD+%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87&text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42&text-field%5B%5D=(000)+000+00+00&text-alignment%5B%5D=center& text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42"

如您所见，单选按钮不在“数组”中，这是一个唯一变量。但是我在变量名的末尾使用了“ []”符号。

这是我的HTML：

<form>
  <div class="row">
    <div class="col-lg-4">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Шаблон <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('Иванов Иван Иванович');">Имя</a></li>
            <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('(000) 000 00 00');">Телефон</a></li>
            <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('[email protected]');">E-mail</a></li>
            <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('г. Город, ул. Улица 1');">Адрес</a></li>
            <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('example.com');">Сайт</a></li>
          </ul>
        </div>
        <input type="text" class="form-control" name="text-field[]">
      </div>
    </div>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active">
        <input type="radio" checked="checked" name="text-alignment[]" value="left"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
      </label>
      <label class="btn btn-default">
        <input type="radio" name="text-alignment[]" value="center"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
      </label>
      <label class="btn btn-default">
        <input type="radio" name="text-alignment[]" value="right"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
      </label>
    </div>

    <div class="input-group spinner padding-15 pull-left">
      <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></span>
      <input type="text" class="form-control" value="42" name="text-h-alignment[]">
      <div class="input-group-btn-vertical">
        <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button>
        <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button>
      </div>
    </div>

    <div class="input-group spinner padding-15 pull-left">
      <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></span>
      <input type="text" class="form-control" value="42" name="text-v-alignment[]">
      <div class="input-group-btn-vertical">
        <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i>
        </button>
        <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i>
        </button>
      </div>
    </div>

  </div>
  <div class="row margin-top-15">
    <div class="col-lg-4">
      <a href="#" class="color-green" onclick="$(this).closest('.container-fluid').find('.row:eq(0)').clone().prependTo($(this).closest('.container-fluid form'))">
        <div class="circle green-circle circle-position pull-left"><span class="glyphicon glyphicon glyphicon-plus color-white circle-plus" aria-hidden="true"></span>        </div>Добавить еще поля</a>
    </div>
  </div>
</form>

亚历山大·索洛玛卡（Aleksey Solomakha）

我没有在HTML中找到本机解决方案。

因此，有必要对JS使用这样的解决方案：

$(this).closest('.container-fluid').find('.row:eq(0)').clone(true).find('input[type=radio]').attr('name', function(i, val){return val.replace(/(\d+)/, function(n){ return ++n })});

结果，当您单击“重复字段”时，出现单选按钮，其名称为：text-alignment [1]，text-alignment [2] ...

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。