Me gustaría que el usuario ingrese todas las materias que toma de una lista desplegable, al mismo tiempo que ingresa su calificación, elegida de una lista desplegable. Estoy usando un formulario para cada una de las entradas, pero me di cuenta de que es un código incorrecto si copio y pego todos los formularios. Y si hago algún cambio en la lista desplegable, tengo que modificarlo 6 veces. Quería hacer un bucle For pero es HTML. ¿Alguna forma de solucionar este problema?

Quería hacer un bucle For pero es HTML, así que no sé cuál es la sintaxis o hay alguna forma de bucle en HTML. ¿O se supone que debo mover este código a Javascript?

`

<form class="form">
     <select name="Subjects">
         <option disabled selected value>Subject</option>
         <option value="English">English</option>
         <option value="Maths/Science">Elementary Maths</option>
         <option value="Maths/Science">Additional Maths</option>
         <option value="Maths/Science">Physics</option>
         <option value="Maths/Science">Chemistry</option>
         <option value="Humans">Literature</option>
         <option value="Humans">Combined Humans (SS+History)</option>
         <option value="Humans">Mother Tongue</option>
     </select>
     <select name="Grade" id="Grades">
          <option disabled selected value>Grade</option>
          <option value="1">A1</option>
          <option value="2">A2</option>
          <option value="3">B3</option>
          <option value="4">B4</option>
          <option value="5">C5</option>
          <option value="6">C6</option>
          <option value="7">C7</option>
          <option value="8">E8</option>
          <option value="9">F9</option>
     </select>
     <br>

`

Mostrará una forma. Necesito tener 6 formas del mismo diseño exacto. No quiero copiar pegarlo. Prefiero usar un bucle de algún tipo.

-1
Anunaya Joshi 20 oct. 2019 a las 12:46

3 respuestas

La mejor respuesta

Aquí hay una manera simple de usar cloneNode():

  1. Dar identificadores a sus entradas
  2. En JavaScript clone ambas entradas
  3. Antes de agregarlos a su formulario, cambie su identificación por
  4. crear un elemento de salto de línea
  5. Agregar el salto de línea y las entradas clonadas

N.B: Si desea duplicar todo el formulario en lugar de las entradas, use el mismo método clonando el elemento del formulario y añádelo al boday o al contenedor div.

  for(i=1; i<6; i++) {
        var subject=document.getElementById("subject");
        var newSubject = subject.cloneNode(true);
        newSubject.id='subject'+i;

        var grade=document.getElementById("grade");
        var newGrade = grade.cloneNode(true);
        newGrade.id='garde'+i;

        var linebreak = document.createElement("br");

        document.getElementById("myform").appendChild(linebreak);        
        document.getElementById("myform").appendChild(newSubject);        
        document.getElementById("myform").appendChild(newGrade);        
    }
<form class="form" id="myform">
     <select id="subject" name="Subjects">
         <option disabled selected value>Subject</option>
         <option value="English">English</option>
         <option value="Maths/Science">Elementary Maths</option>
         <option value="Maths/Science">Additional Maths</option>
         <option value="Maths/Science">Physics</option>
         <option value="Maths/Science">Chemistry</option>
         <option value="Humans">Literature</option>
         <option value="Humans">Combined Humans (SS+History)</option>
         <option value="Humans">Mother Tongue</option>
     </select>
     <select  name="Grade" id="grade">
          <option disabled selected value>Grade</option>
          <option value="1">A1</option>
          <option value="2">A2</option>
          <option value="3">B3</option>
          <option value="4">B4</option>
          <option value="5">C5</option>
          <option value="6">C6</option>
          <option value="7">C7</option>
          <option value="8">E8</option>
          <option value="9">F9</option>
     </select>
</form>
0
Moïze 20 oct. 2019 a las 10:24

La respuesta a su pregunta es No . No puedes hacer un bucle en HTML. HTML es un lenguaje descriptivo, describe los elementos de su página.

Para habilitarse con capacidades de programación, HTML define la etiqueta <script>. Los navegadores lo admiten y pueden interpretar y ejecutar el código que contiene. Por razones históricas, el código está escrito en lenguaje javascript .

En su caso, debe cambiar el contenido de la página mediante programación. Para hacerlo, no cambia el HTML, sino que manipula el DOM , la representación interna de la página en el navegador, una vez que la página ha terminado de cargarse. El soporte de JavaScript en los navegadores ha estandarizado algunos métodos para acceder al DOM y manipular (insertar, eliminar, cambiar) el contenido del DOM.

Primero debe crear una etiqueta <script defer> dentro de su página <head>. El atributo defer especifica que desea que su código se ejecute después de que se haya cargado la página completa y se haya construido el DOM.

<script defer>
</script>

Luego debe (1) encontrar su <form> en la página (2) copiarlo cinco veces (3) dándoles todos (incluyendo el original) ID únicos e (4) insertando las copias en el DOM después del forma original, antes del siguiente elemento que sigue a la forma original.

let originalForm=document.querySelector("form");   //(1)
let insertionPoint=form.nextSibling;  //(4)
originalForm.id="form-1";  //(3)
for (let i=2;i<=6;i++) {  //(2)
  let copied = originalForm.cloneNode(true); //(2)
  copied.id='form-'+i; //(3)
  originalForm.parentNode.insertBefore(copied, insertionPoint); //(4)
}
0
PA. 20 oct. 2019 a las 11:01

Podemos crear dos matrices para asignaturas y calificaciones e iterar sobre ellas y agregar cada asignatura / calificación a la etiqueta de selección correspondiente.

const subjects = [
  { name: "English", value: "English" },
  { name: "Elementary Maths", value: "Maths/Science" },
  { name: "Additional Maths", value: "Maths/Science" },
  { name: "Physics", value: "Maths/Science" },
  { name: "Chemistry", value: "Maths/Science" },
  { name: "Literature", value: "Humans" },
  { name: "Combined Humans (SS+History)", value: "Humans" },
  { name: "Mother Tongue", value: "Humans" }
];

const grades = [
  { name: "A1", value: "1" }, { name: "A2", value: "2" },
  { name: "B3", value: "3" }, { name: "B4", value: "4" },
  { name: "C5", value: "5" }, { name: "C6", value: "6" },
  { name: "C7", value: "7" }, { name: "E8", value: "8" },
  { name: "F9", value: "9" }
];

const createOption = option => {
    let optionEl = document.createElement('option');
    optionEl.value = option.value;
    optionEl.innerText = option.name;
    return optionEl;
}

function addOptions(subjectTagId, options) {
    const select = document.getElementById(subjectTagId);
    options.forEach(option => select.appendChild(createOption(option)));
}

addOptions('subjects', subjects);
addOptions('grades', grades)

Nota: Agregue una identificación 'subjects' a la etiqueta de selección para las asignaturas como lo tiene para la etiqueta de selección para la calificación. Espero que esto ayude :)

0
Abito Prakash 20 oct. 2019 a las 10:18