Select input data attribute not passing in jQuery appendTo form input

Abdullah Al Mamun 0
Viewed 37

If the form is selected in the initial state, the data is passed. But the cloning form doesn't pass data from the select to the next form. If I duplicate the form at the beginning it also passes the data. But I want the cloned form to pass the data.

$('input#clone').click(function() {
  $("div#old").clone().attr('id', 'new_form').appendTo("body")
})

$(".product").change(function() {
  newPrice = $(this).children(':selected').data('price');
  $(this).parent().next('.pricebox').find('.price').val(newPrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Clone" id="clone" />
<hr>
<div id="old">
  <div class="">
    <select class="product" name="product[]">
      <option value="1" data-price="1.99">1</option>
      <option value="2" data-price="2.99">2</option>
      <option value="3" data-price="3.99">3</option>
      <option value="4" data-price="4.99">4</option>
    </select>
  </div>
  <div class="pricebox">
    <input type="text" name="price[]" class="price" value="00" />
  </div>
</div>

jquery
2 Answers

Consider the following.

$(function() {
  $('input#clone').click(function(e) {);
    var newForm = $("div#old").clone();
    newForm.attr('id', 'new_form_' + ($("[id^='new_form']").length + 1)).appendTo(".forms");
    $("select", newForm).val($("#old select").val());
  });

  $(".forms").on("change", ".product", function(e) {
    newPrice = $("option:selected", this).data('price');
    $(this).parent().next('.pricebox').find('.price').val(newPrice);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Clone" id="clone" />
<hr>
<div class="forms">
  <div id="old">
    <div class="">
      <select class="product" name="product[]">
        <option value="1" data-price="1.99">1</option>
        <option value="2" data-price="2.99">2</option>
        <option value="3" data-price="3.99">3</option>
        <option value="4" data-price="4.99">4</option>
      </select>
    </div>
    <div class="pricebox">
      <input type="text" name="price[]" class="price" value="1.99" />
    </div>
  </div>
</div>

This properly clones the item and resets the Value.It also uses proper delegation to ensure all new dynamic elements get the same callback. This also ensures that all items have unique IDs.

Twisty0

You can use on() to get change on created element then use each() to do a loop on all element.

NOTE: ID must be unique, you need to change it to class if you want more than one element.

$('input#clone').click(function() {
  $("div.old").clone().attr('id', 'new_form').appendTo("body")
})

$(document).on('change', '.product', function(event) {
  newPrice = $(this).children(':selected').data('price');
  $(this).parent().next('.pricebox').find('.price').val(newPrice);
  $('.product').each(function() {
    //console.log($(this).val());
    console.log($(this).parent('div:first').nextAll('.pricebox').find('.price').val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Clone" id="clone" />
<hr>
<div class="old">
  <div class="">
    <select class="product" name="product[]">
      <option value="1" data-price="1.99">1</option>
      <option value="2" data-price="2.99">2</option>
      <option value="3" data-price="3.99">3</option>
      <option value="4" data-price="4.99">4</option>
    </select>
  </div>
  <div class="pricebox">
    <input type="text" name="price[]" class="price" value="00" />
  </div>
</div>

SKJ0
Related