フォーム要素に名前属性を動的に追加できません

Question

名前属性を「pickup_city2」と「pickup_address2」として動的に追加して、ids、pickup_cityExtend、pickup_addressExtendの要素を選択したいとします。以下は

$('#multiCheck').change(function() { 
 
    if (this.checked) { 
 
    var $pick = $('#cityPickExtend'); 
 
    $clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick); 
 
    var city = document.getElementById('pickup_cityExtend'); 
 
    city.setAttribute('name', 'pickup_city2'); 
 

 
    var address = document.getElementById('pickup_addressExtend'); 
 
    address.setAttribute('name', 'pickup_address2'); 
 
    } 
 
    if (!this.checked) { 
 
    $clone.remove(); 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form class="cityPick form-horizontal form-label-right" action="" method="POST" novalidate>{% csrf_token %} 
 
    <div class="form-group"> 
 
    <div class="city col-md-4 col-sm-4 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="city">City<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <select class="form-control" id="city" name="pick_up_city"> 
 
      <option>Select City</option> 
 
      <option>Mumbai</option> 
 
      <option>Delhi</option> 
 
      <option>Jaipur</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="address col-md-7 col-sm-7 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="address">Address<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <input type="text" class="form-control" id="address" name="pick_up_address"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="multiCheck col-md-4 col-sm-4 col-xs-12"> 
 
     <input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point? 
 
     <br> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group hide" id="cityPickExtend"> 
 
    <div class="city col-md-4 col-sm-4 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="city">City<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <select class="form-control" id="pickup_cityExtend" name=""> 
 
      <option>Select City</option> 
 
      <option>Mumbai</option> 
 
      <option>Delhi</option> 
 
      <option>Jaipur</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="address col-md-7 col-sm-7 col-xs-10"> 
 
     <div class="item form-group"> 
 
     <label class="control-label" for="address">Address<span class="required">*</span> 
 
     </label> 
 
     <div class=""> 
 
      <input type="text" class="form-control" id="pickup_addressExtend" name=""> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="removeBtn col-md-1 col-sm-1 col-xs-2"> 
 
     <button type="button" id="removeBtn">Remove</button> 
 
    </div> 
 

 
    <div class="addBtn"> 
 
     <button type="button" id="addBtn">Add another pickup location</button> 
 
    </div> 
 
    </div> 
 

 
    <div class="item form-group"> 
 
    <label for="shipment_datetime" class="control-label dateTime">Pickup Date &amp; time 
 
     <span class="required">*</span> 
 
    </label> 
 

 
    <div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> 
 

 
     <input class="form-control" size="16" name="shipment_datetime" type="text" value="" readonly style="background-color: #fff;"> 
 

 
     <span class="input-group-addon"> 
 
                <span class="glyphicon glyphicon-remove"></span> 
 
     </span> 
 

 
     <span class="input-group-addon"> 
 
                <span class="glyphicon glyphicon-th"></span> 
 
     </span> 
 
    </div> 
 
    </div> 
 

 
</form>

私のjqueryのコードです。

$('#multiCheck').change(function() { 
    if (this.checked) { 
    var $pick = $('#cityPickExtend'); 
    $clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick); 
    var city = document.getElementById('pickup_cityExtend'); 
    city.setAttribute('name', 'pickup_city2'); 
    var address = document.getElementById('pickup_addressExtend'); 
    address.setAttribute('name', 'pickup_address2'); 
    } 
    if (!this.checked) { 
    $clone.remove(); 
    } 

}) 

Answer 1

クローンする部分には、idという4つの要素があります。 id値は一意である必要がありますとして、あなたは、特定のidを照会する場合、DOM APIは、常に、このようなこれらの線のように、最初の一致を返します。

var city = document.getElementById('pickup_cityExtend'); 
var address = document.getElementById('pickup_addressExtend'); 

結果は、あなたがに追加一部の要素と一致しませんドキュメント。

有効にするには、idの値を一意の値（たとえば、2を追加して）に置き換える必要があります。

jQuery構文をネイティブDOMメソッドと組み合わせて要素を取得しています。 document.getElementByIdを使用せず、jQuery $('#...')相当のものを使用するとより一貫性があります。あなたのコードを実行すると、あなたがピック要素のクローンを作成する場合、また、要素のidをクローン化されることで、あなたが必要DOMに

var $clone; 
$('#multiCheck').change(function() { 
    if (this.checked) { 
    var $pick = $('#cityPickExtend'); 
    $clone = $pick.clone().removeClass('hide').removeAttr('id'); 
    // Add '2' to all ID values, and set name value to the same. 
    $clone.find('[id]').each(function() { 
     var id = $(this).attr('id') + '2'; 
     $(this).attr('id', id).attr('name', id); 
    }); 
    // Now that the id value are unique, it is OK to add the clone: 
    $clone.insertAfter($pick); 
    } else if ($clone) { // Check whether we actually have a clone 
    $clone.remove(); 
    } 
});