フォーム上に複製された入力のIDと名前を動的に変更する

Question

新規： IDと名前の変更は機能しますが、入力がさらに増えるとどうなりますか？ codepenには1つのみが含まれていますが、実際のプロジェクトにはcomponent_date、component_ownerといういくつかのコンポーネントがあります。これらの入力をどのようにユニークに設定するには？

私はこのフォームの一部が複製されています。複製する部分には、一意である必要がある複数の入力があります。現在レプリケートされた名前とIDが変更されると、既存の名前と というIDを保持して、増分された数値を追加したいと考えています。現在、複製可能な入力は変更されます。新しい入力の名前がcomponentName_0のcomponentID_0である場合は、最初にname = "component_name"とid = "input-name"という名前を付けます。 = "component_1 id =" input-name_1など

本来、元のコンポーネントのIDと名前を使用したいが、それぞれに増分された数値を追加するだけでいい。 （？0）すでにそれに貼付され、現在私が何を意味するかを示すためにcodepen簡略化されている彼らが最初にここに あるから、名前と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のcomponentID_0にコンポーネントの名前とIDを変更し、var i = 1と設定します。

Answer 2

は、PHPでループを使用してカウンタを追跡し、そして名前またはIDを持つカウンターを連結します。

例えば

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