0

estoy haciendo un registro de usuarios pero me topo con un problema: Quiero habilitar la opción para agregar más usuarios de una sola vez, los que sean necesarios. intenté crear los nuevos registros con .clone(); de jQuery:

function clonar() {
  var $div = $("#usuario").clone();
  $("#nuevo").html($div);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div id="usuario">
    <label>Nombre</label>
    <input type="text" id="nombre">
    <br>
    <label>Apellido</label>
    <input type="text" id="apellido">
  </div>

<div id="nuevo">
</div>
<button onclick="clonar();">
Agregar otro
</button>

Pero lo que eso hace es simplemente agregarme uno solo, en lugar de agregar uno nuevo cada vez que se de click.

Añadido a eso, está el problema de los ID, ya que en ambos divs los id de los inputs son exactamente los mismos, y cuando quiera llevar los datos para ingresarlos a la Base de datos, voy a tener problema con eso. ¿Hay alguna manera de hacer que el id cambie?
¿O alguien conoce una mejor manera de hacer lo que trato de conseguir?

Les dejo el fiddle por si les ayuda en algo
https://jsfiddle.net/3h9eq8rx/9/

2
  • No se crea el ID durante el registro. Se auto-asigna un ID en la base de datos, con una columna ID auto-incremental, y la misma base de datos da el numero cuando esta se hace del modo correcto.
    – Excorpion
    Commented el 25 oct. 2021 a las 17:15
  • Si, ese no es el problema. Yo digo a la hora de traer la informacion del formulario, lo hago mediante $("#ID_DEL_INPUT");. Si los IDs de los inputs son el mismo, no generará problemas? Commented el 25 oct. 2021 a las 17:18

1 respuesta 1

0

Encontré una manera de hacerlo. No se si es la más efectiva, pero pues me funciona para lo que quiero hacer:

Básicamente lo que estoy haciendo es que estoy creando una cadena con el código HTML, y cada que se presiona el botón, le concateno los elementos otra vez y eso es lo que le mando al DIV.

var contador = 1;
var nuevoDIV = "";

function clonar() {
  contador ++;
  
  var inputNombre = "<label>Nombre</label><input type='text' id='nombre"+contador+"'><br>";
  var inputApell  = "<label>Apellido</label><input type='text' id='apellido"+contador+"'>";
  
  nuevoDIV += inputNombre;
  nuevoDIV += inputApell;
  nuevoDIV += "<hr>";

  $("#nuevo").html(nuevoDIV);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>


  <div id="usuario">
    <label>Nombre</label>
    <input type="text" id="nombre1">
    <br>
    <label>Apellido</label>
    <input type="text" id="apellido1">
    <hr>
  </div>

<div id="nuevo">
</div>
<button onclick="clonar();">
Agregar otro
</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.