Warning: Illegal string offset 'language' in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 510

Warning: ksort() expects parameter 1 to be array, string given in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 513

Warning: Illegal string offset 'language' in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 510

Warning: ksort() expects parameter 1 to be array, string given in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 513

Warning: Illegal string offset 'language' in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 510

Warning: ksort() expects parameter 1 to be array, string given in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 513

Warning: Illegal string offset 'language' in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 510

Warning: ksort() expects parameter 1 to be array, string given in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 513

Clonar inputs con jquery

06 de Mar, 2018


Warning: Illegal string offset 'language' in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 510

Warning: ksort() expects parameter 1 to be array, string given in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 513

Warning: Illegal string offset 'language' in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 510

Warning: ksort() expects parameter 1 to be array, string given in /homepages/7/d574192756/htdocs/zeidan/wp-content/plugins/igsyntax-hiliter/classes/frontend.php on line 513
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