CODEWITHSUNDEEP
jqueryhtmlclone
prettyInPink
prettyInPink

Reputation: 3444

jQuery, get all the values of all cloned input fields

Need some help or pointers to achieve the following. Cloning input fields on click and retrieving the values of the fields on change so they get pasted as text into another div. However it only seems to work for the original hard coded fields (not the cloned ones). I have tried adding each function on several places in the code but with to no avail. My code looks like this for now:

<div class="cartWrapper">
    <div class="clonedInput">

        <label for="chipsCategory" class="">Chips Category <span class="requiredField">*</span></label>
        <select class="categoryName1 changeFields" name="chipsCategory">
            <option value="Kraks">Kraks</option>
            <option value="Curls">Curls</option>
            <option value="Crisps">Crisps</option>
        </select>

        <label for="chipsTaste" class="">Choose Taste <span class="requiredField">*</span></label>
        <select class="chipsTaste1 changeFields" name="chipsTaste">
            <option value="brand_1">Brand 1</option>
            <option value="brand_2">Brand 2</option>
            <option value="brand_3">Brand 3</option>
        </select>

        <label for="chipsQty">Quantity <span class="requiredField">*</span></label>
        <input type="number" value="1" class="changeFields chipsQty" name="chipsQty[">


    </div>

      <button class="clone">Clone</button> 

    </div>
</div>    
<div id="pasteItems"></div>

and the js:

$( document ).ready(function() {

    function clone(){

        $('.clonedInput:first')
        .clone()
        .appendTo(".cartWrapper")
        .each(function(){})
        .on('click','button.clone',clone).append('<button class="remove">Remove</button>')
        .on('click','button.remove',remove);        
}

function remove(){
    $(this).parents(".clonedInput").remove();
}

$("button.clone").on("click", clone);

$("button.remove").on("click", remove);


function getValues() {

    var categoryName = $('.categoryName1').val();

    var chipsTaste = $('.chipsTaste1').val();

    var chipsQty = $('.chipsQty').val();    

    $('#pasteItems').text(categoryName + ' ' + chipsTaste + ' ' + chipsQty);

}

getValues();

$('.changeFields').change(function(){

$(this).each(function(){

    getValues();

    });

});


});

Thank you very much for all help!

Upvotes: 1

Views: 2889

Answers (2)

exoboy
exoboy

Reputation: 2058

If you have your inputs instantiated at page startup and are not dynamically loaded after the page ready event is fired, then you can use clone() to add additional input elements to your page.

However, you need to tell jQuery that you want to clone not only the input element, but its data and event listeners.

Do this by changing your clone() code to the following:

$( document ).ready(function() {

  // clone(true,true) means -> .clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
  function clone(){

      $('.clonedInput:first')
      .clone( true, true )
      .appendTo(".cartWrapper")
      .each(function(){})
      .on('click','button.clone',clone).append('<button class="remove">Remove</button>')
      .on('click','button.remove',remove);        
  }
});

You can read more about it here. http://api.jquery.com/clone/

Be careful when defining a function with the same name, even though it is in a different scope. This can cause confusion for you later. Better to call it clone_now(), or clone_once(), or clone_at_startup(), or however you like to name your functions.

Hope this helps!

Upvotes: 1

Cory
Cory

Reputation: 1283

Since they were created dynamically, they cannot be selected in the same way (see Delegation). So you need :

 $(".cartWrapper").on('change', '.changeFields', function() {
     //do what you need to with the value of the cloned input
  });

Upvotes: 4

Related Questions