動態更改表單上覆制輸入的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和名稱，但只是增加一個遞增的數字，另外它會很高興有inital有一個數字複製從他們最初 這裏什麼是一個簡化的codepen來說明我的意思的名稱和ID變化時（？0）已經貼吧目前：

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。

Answer 2

使用循環在PHP，跟蹤計數器，並連接與名稱或ID的計數器。

E.g

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