Clonar inputs con jquery

06 de Mar, 2018

Clonar inputs con jquery
5 (100%) 2 votes

Como podemos clonar los inputs de un formulario fácilmente con jQuery. Algunas veces nos encontramos con que debemos clonar entradas o cualquier elemento del html del DOM. Haremos un ejemplo para clonar Inputs.

Primero creamos el formulario

  1. <div class="vars" data-array="1">
  2. <p>
  3. <label for="version">Field 1</label>
  4. <input type="text" class="widefat" name="vars[0][field]">
  5. </p>
  6. </div>
  7. <span class="clon-this">Click Here to Clon This Field</span>

ahora dentro del jquery creamos nuestra función para clonar el campo input

  1. $(".clon-this").on('click', function () {
  2.     var dataarray = $(".vars").attr('data-array');
  3.     var row = $("p").first().clone(true);
  4.     $(row).find("p").removeClass('clon');
  5.     $(row).find("input").attr('value', "");
  6.     $(row).find("label").html('Cloned');
  7.     $(row).find("input").each(function(){
  8.         $(this).attr("name", $(this, row).attr("name").replace(/\d+/, dataarray));
  9.     });
  10.     $(row).appendTo('.vars');
  11.     dataarray++;
  12.     $(".vars").attr('data-array', dataarray);
  13. });

puedes ver el ejemplo funcionando en https://codepen.io/k2klettern/pen/ddxNjy