es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear campos de formulario dinámicos en JavaScript.

27 Jul, 2023 Programación

Quiero crear un formulario dinámico en el que el usuario pueda agregar atributos que no hayan sido definidos previamente; puede agregar tantos como desee. Por ejemplo, si crea un vestido y desea agregar el atributo “talla”, simplemente hará clic en “agregar atributo” y se generará un HTML. Ya lo he hecho, pero necesito insertar algunas variables para poder cambiar el nombre de los atributos.

var i = 1;
function add_fields() {
    var emptydiv = document.createElement('div');
    emptydiv.innerHTML = '<div class="col-12 col-md-6"><div class="group"><input type="text" name="' + i + '" id="Royalties" required=""><span class="highlight"></span><span class="bar"></span><label>Atributos</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required=""><span class="highlight"></span><span class="bar"></span><label>valor</label></div></div>';
    document.getElementById('addable').appendChild(emptydiv);
    i++;
    console.log(i);
    return emptydiv;     
}

Lo que quiero hacer es cambiar los nombres de los campos en este HTML por la variable i.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En el código actual, la cadena literal de plantilla para el atributo “name” del campo de entrada está utilizando comillas simples en lugar de acentos graves. Para utilizar la variable “i” como un valor dinámico para el atributo “name”, se pueden realizar los siguientes cambios en el código:

    var i = 1;

function add_fields() {
  var emptydiv = document.createElement('div');
  emptydiv.innerHTML = `
    <div class="col-12 col-md-6">
      <div class="group">
        <input type="text" name="${i}" id="Royalties" required="">
        <span class="highlight"></span>
        <span class="bar"></span>
        <label>Attributes</label>
      </div>
    </div>
    <div class="col-12 col-md-6">
      <div class="group">
        <input type="text" name="Size" id="Size" required="">
        <span class="highlight"></span>
        <span class="bar"></span>
        <label>value</label>
      </div>
    </div>
  `;
  i++;
  console.log(i);
  document.getElementById('addable').appendChild(emptydiv);
  return emptydiv;
}

    En el código actualizado, la cadena literal de plantilla incluye el atributo “name” para el campo de entrada como ${i}, lo cual utilizará el valor actual de la variable “i” como un valor dinámico para el nombre del campo.

Comments are closed.