无法将名称属性动态添加到表单元素

Question

I wish to dynamically add the name attribute as 'pickup_city2' and 'pickup_address2' to select elements with ids, pickup_cityExtend and 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> 

Below is my 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

Within the part that you clone, there are four elements that have an id attribute. As id values must be unique, the DOM API will always return the first match when you query for a certain id , such as in these lines:

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

The results do not match the elements in the part you added to the document.

In order to make it work, you need to replace the id values with something that is unique (by adding a 2 for instance).

As a side note: you are mixing jQuery syntax with native DOM methods to retrieve elements. It would be more consistent if you would not use document.getElementById , but the jQuery $('#...') equivalent.

Here is some adjusted 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();
  }
});