Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Clonar Input con diferente ID

Estas en el tema de Clonar Input con diferente ID en el foro de Jquery en Foros del Web. Hola estimados, mi problema es el siguiente, estoy aprendiendo jQuery, y estuve haciendo pruebas con .clone(); para duplicar un input pero el problema es que ...
  #1 (permalink)  
Antiguo 06/06/2015, 21:24
 
Fecha de Ingreso: enero-2011
Mensajes: 112
Antigüedad: 13 años, 3 meses
Puntos: 4
Pregunta Clonar Input con diferente ID

Hola estimados, mi problema es el siguiente, estoy aprendiendo jQuery, y estuve haciendo pruebas con .clone(); para duplicar un input pero el problema es que lo duplica con todo igual (incluido el ID).

Como podria hacer para que el ID de input (id="campo-0") cada vez que duplique pase a (id="campo-1") nota tengo un botón con una clase "add-input".

Gracias de antemano por cualquier pista que me den.
  #2 (permalink)  
Antiguo 07/06/2015, 00:16
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 6 meses
Puntos: 977
Respuesta: Clonar Input con diferente ID

Te va a tocar elaborar una función en la cual tomarás el id del elemento clonado y a su último caracter —que es el número—, le sumará uno.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 07/06/2015, 13:35
 
Fecha de Ingreso: enero-2011
Mensajes: 112
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Clonar Input con diferente ID

Si, claro.

Dejo la solución por si alguien busca lo mismo.

En mi HTML hay cosas que estan demas como el input hidden que son parte de otra funcionalidad, pero lo que importa es el ejemplo de duplicado :)

Código HTML:
Ver original
  1. <div class="producto-container">
  2.                         <div class="producto-row-0">
  3.                             <div class="form-group col-md-5">
  4.                                 <label class="sr-only" for="">Producto</label>
  5.                                 <input type="text" name="producto" class="form-control input-sm" placeholder="Producto">
  6.                                 <input type="hidden" name="prod_custom" class="form-control input-sm" placeholder="Producto Personalizado" value="0">
  7.                             </div>
  8.                             <div class="form-group col-md-2">
  9.                                 <label class="sr-only" for="">Cantidad</label>
  10.                                 <input type="text" name="cantidad" class="form-control input-sm" placeholder="Ingrese la cantidad">
  11.                             </div>
  12.                             <div class="form-group col-md-2">
  13.                                 <label class="sr-only" for="">Precio</label>
  14.                                 <input type="text" name="precio" class="form-control input-sm" placeholder="Precio">
  15.                             </div>
  16.                             <div class="form-group col-md-2">
  17.                                 <input type="checkbox" name="act_custom" class="act_custom">
  18.                                 <label for="">Producto Personalizado</label>
  19.                             </div>
  20.                             <div class="boton form-group col-md-1">
  21.                                 <label class="sr-only" for="">Agregar otro Producto</label>
  22.                                 <button id="add-producto" class="btn btn-primary input-sm"><strong>+</strong></button>
  23.                             </div>
  24.                         </div>
  25.                     </div>




Código Javascript:
Ver original
  1. //Agrega Nuevos Campos de Productos
  2.     var i = 1;
  3.     $("#add-producto").click(function(e){
  4.         e.preventDefault();//eliminamos el evento por defecto
  5.         $(".producto-row-0").clone().appendTo(".producto-container").attr("class","producto-row-"+(i++));
  6.     });

Saludos.

Etiquetas: clonar, duplicar, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:04.