動態更改表單上復制輸入的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

在php上使用循環，跟蹤計數器，並將計數器與名稱或ID連接起來。

例如

for($i=0; $i<5; $i++){
   echo '<div id="myID_"' . $i . 'andSoOn>'
}

Answer 2

看來您想通了。 我相信appendChild在您的CodePen中拼寫錯誤。 對於具有ID 0的初始組件，您可以在HTML中將組件的名稱和ID更改為componentID_0 ，然后將var i = 1設置。