javascript - 动态更改表单上复制输入的 ID 和名称

Question

新:更改 id 和名称有效，但如果有更多输入怎么办？ codepen 只有一个，但真正的项目会有多个，即 component_date、component_owner，如何将这些输入也设置为唯一？

我有这个表格，其中有一部分是复制的。复制的部分有几个需要唯一的输入。当前复制名称和 ID 更改时，我想保留现有名称和 id 并添加一个递增的数字。当前可复制的输入发生变化。因此，最初，name="component_name"和 id ="input-name 当复制新输入时名称为 componentName_0 componentID_0。我希望初始输入有 _0，然后每个复制的输入都有下一个增量。所以组件 2 将有名称="component_1 id="input-name_1 等等。

本质上，我想使用原始组件 ID 和名称，但只是为每个组件添加一个递增的数字。此外，如果首字母有一个数字(0？)已经贴在上面就好了。当前，当复制时，名称和 ID 会从最初的状态发生变化这是一个简化的代码笔来说明我的意思:

https://codepen.io/anon_guy/pen/VMZWWW?editors=1010

HTML:

<div class="wrapper">
  <div class="panel panel-default" id="add-components">

    <div class="panel-heading">
      <h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_add_component; ?></h3>
    </div>
    <div class="panel-body" id="addon">

        <div class="tab-content">
          <div class="tab-pane active" id="tab-general">

              <?php foreach ($languages as $language) { ?>
              <div class="tab-pane" id="language<?php echo $language['language_id']; ?>">
                <div class="form-group required">
                  <div class= "row">
                  <div class="col-sm-8 col-sm-push-1 form-group required" >
                    <label for="input-name<?php echo $language['language_id']; ?>"><?php echo $entry_name; ?></label>
                    <input type="text" name="component_name" placeholder="<?php echo $entry_name; ?>" id="input-name<?php echo $language['language_id']; ?>" class="form-control" value="<?php echo $component_name; ?>" />

                    <?php if (isset($error_name[$language['language_id']])) { ?>
                    <div class="text-danger"><?php echo $error_name[$language['language_id']]; ?></div>
                    <?php } ?>
                  </div>
                  <div class="col-sm-2 col-sm-push-1 form-group required">
                    <div class="campaign-group form-group">

                          <div class="dropdown">
                            <button class="btn btn-primary pull-left dropdown-toggle" type="button" id="button-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_type;?><span class="caret"></span></button>
                            <ul class="campaign-form-type dropdown-menu">
                              <li class="campaign-dropdown-list">Direct Mail</li>
                              <li class="campaign-dropdown-list">Email</li>
                              <li class="campaign-dropdown-list">Event</li>
                              <li class="campaign-dropdown-list">Text Message</li>
                              <li class="campaign-dropdown-list">Letter</li>
                              <li class="campaign-dropdown-list">Postcard</li>
                            </ul>
                          </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-4 col-sm-push-1 form-group required">
                  <label class="control-label" for="input-date-beginning"><?php echo $entry_campaign_start_date; ?></label>
                    <div class="input-group date required">
                      <input type="text" name="component_date"  placeholder="<?php echo  $entry_date; ?>" data-date-format="YYYY-MM-DD" id="input-component_date" class="form-control" />
                      <span class="input-group-btn">
                      <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                      </span>
                    </div>
                    <?php if (isset($error_date_starting)) { ?>
                      <label class="text-danger"><?php echo $error_date_starting; ?></label>
                    <?php } ?>
                  </div>
                  <div class="col-sm-4 col-sm-push-1 form-group required">
                      <label class="control-label" ><?php echo $entry_owner; ?></label>
                      <select name="component_owner" id="component_owner">
                      <?php foreach ($users as $user) { ?>
                          <option value="<?php echo $user['username']; ?>"><?php echo $user['username']; ?></option>
                      <?php } ?>
                      </select>
                  </div>
                  <div class="col-sm-5 col-sm-push-1 form-group required">
                    <!--label class="control-label" for="input-code"><?php echo $entry_code; ?></label-->
                      <div class="input-code required">
                      <input type="text" name="campaign_code" value="<?php echo $code; ?>" placeholder="<?php echo $code; ?>" id="input-campaign_code" class="form-control" readonly />
                    </div>
                    <?php if (isset($error_date_starting)) { ?>
                      <label class="text-danger"><?php echo $error_code; ?></label>
                    <?php } ?>
                  </div>
                </div>


                                </div>

                            </div>

            </div>
            </div>
            <?php } ?>
          </div>
        </form>
  </div>

</div>

JS:

<script type="text/javascript">
  let cloneList = [];
  var i = 0;

  document.getElementById('launch').onclick = function(event) {
    event.preventDefault();

    var addOnDiv = document.getElementById('addon');
    var container = document.getElementById('add-components')
    var clonedNode = addOnDiv.cloneNode(true);
    var component = clonedNode.querySelector('input');

    clonedNode.id = i++;

    cloneList.push(clonedNode.id);

    component.id = `componentID_${clonedNode.id}`;
    component.name = `componentName_${clonedNode.id}`;

    container.appendChild(clonedNode);
  }
  </script>

Answer 1

看来你想通了。我相信 appendChild 在您的 CodePen 中拼错了。对于id为0的初始组件，您可以在HTML中将组件的名称和ID更改为componentID_0，然后设置var i = 1.