Namensattribut zum Formularelement kann nicht dynamisch hinzugefügt werden

Question

Ich möchte das Namensattribut dynamisch als 'pickup_city2' und 'pickup_address2' hinzufügen, um Elemente mit IDs, pickup_cityExtend und pickup_addressExtend auszuwählen.

$('#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>

Unten ist mein jQuery-Code.

$('#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

Im Teil, den Sie klonen, gibt es vier Elemente, die ein id Attribut haben. Als id Werte eindeutig sein muss, wird die DOM API immer das erste Spiel zurück, wenn Sie für eine bestimmte id, wie in diesen Zeilen abfragen:

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

Die Ergebnisse der Elemente in dem Teil, den Sie nicht übereinstimmen hinzugefügt das Dokument.

Um es funktionieren zu lassen, müssen Sie die id Werte durch etwas, das eindeutig ist (z. B. durch Hinzufügen einer 2) ersetzen.

Als eine Randnotiz: Sie mischen jQuery-Syntax mit nativen DOM-Methoden zum Abrufen von Elementen. Es wäre konsistenter, wenn Sie nicht document.getElementById, sondern die jQuery $('#...') gleichwertig verwenden würden. Hier

ist einiger angepasste Code:

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(); 
    } 
});