Question

我希望动态添加name属性为'pickup_city2'和'pickup_address2'来选择带有id，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属性的元素。由于id值必须是唯一的，因此当您查询某个id时，DOM API将始终返回第一个匹配项，例如在以下行中：

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

结果与您添加到文档中的部分中的元素不匹配。

为了使其有效，您需要将id值替换为唯一的（例如，通过添加2）。

作为旁注：您正在将jQuery语法与本机DOM方法混合以检索元素。如果你不使用document.getElementById，而是使用jQuery $('#...')等效，那将会更加一致。

以下是一些经过调整的代码：

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

无法动态地将name属性添加到表单元素

1 个答案: