2

Supongamos que tenemos un formulario pequeño con etiquetas input:

<form action="registrardatos.php" method="post">
  Ingrese el nombre del archivo:
  <input type="text" name="nombre" size="20">
  <br>
  <input type="file" name="myFile">
  <br>
  <input type="submit" name="Enviar">

y que tenemos un botón así:

<button onclick="agregarelemento()">Añadir</button>

En este caso me gustaría saber si existe una forma de replicar las etiquetas input(o cualquier otra etiqueta) dentro del mismo formulario, con el fin de añadir mas archivos y su nombre de forma indefinida, esto sin necesidad de crear los formularios sin necesidad de ponerlos ocultos.

1 respuesta 1

3

function AddElement() {
  try {
    const containerElement = document.createElement("DIV");

    const labelFileName = document.createElement("LABEL");
    labelFileName.innerText = "File Name";

    const inputFileName = document.createElement("INPUT");
    inputFileName.setAttribute("type", "text");
    inputFileName.setAttribute("name", "fileName");
    inputFileName.setAttribute("size", "20");
    labelFileName.appendChild(inputFileName);
    containerElement.appendChild(labelFileName);

    const inputFile = document.createElement("INPUT");
    inputFile.setAttribute("type", "file");
    inputFile.setAttribute("name", "myFile");
    containerElement.appendChild(inputFile);

    document.getElementById("boxFile").appendChild(containerElement);

  } catch (error) {
    console.error("AddElement =>", error);
  }
}
<div>
  <div id="boxFile">
    <div>
      <label> File Name<input type="text" name="fileName" size="20"></label>
      <input type="file" name="myFile">
    </div>

  </div>
  <input type="submit" value="Send">
</div>
<button onclick="AddElement()">Add</button>

Si, puedes crear elementos dinámicos si lo deseas con las diferentes etiquetas que existen en Html, en el ejemplo mencionó cómo utilizar el document.createElement y el containerElement.appendChild para crear nodos y insertarlos en las diferentes etiquetas.

1

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.