Created
November 8, 2023 16:07
-
-
Save MarcoBardalesRodriguez/4870919c1fcd3c3052091cdbacd7b356 to your computer and use it in GitHub Desktop.
campos dinámicos con HTML y JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Form</title> | |
| </head> | |
| <body> | |
| <form action="procesar.js" id="myForm:get"> | |
| <div id="container-inputs"> | |
| </div> | |
| <button id="btn-add-group" type="button">agregar +</button> | |
| <hr> | |
| <button type="submit">enviar -></button> | |
| </form> | |
| <script> | |
| const container = document.getElementById("container-inputs"); | |
| var elementIndex = 0; | |
| var elementCounter = 0; | |
| function createGroup() { | |
| elementIndex++; | |
| elementCounter++; | |
| let elementGroup = document.createElement("div"); | |
| elementGroup.classList.add("group"); | |
| let btnDelete = document.createElement("button"); | |
| btnDelete.addEventListener('click', e => deleteGroup(e)); | |
| btnDelete.innerHTML = " - "; | |
| let elementHTML = ` | |
| <label for="estudios-grupo-${elementIndex}-grado">Grado:</label> | |
| <select name="estudios-grupo-${elementIndex}-grado" id="" pattern="^[A-Z]+"> | |
| <option value="">-- Seleccionar --</option> | |
| <option value="Superior Tecnico">Superior Tecnico</option> | |
| <option value="Superior Universitario">Superior Universitario</option> | |
| <option value="Maestria">Maestria</option> | |
| <option value="Doctorado">Doctorado</option> | |
| <option value="Magister">Magister</option> | |
| <option value="Otro">Otro</option> | |
| </select> | |
| <label for="estudios-grupo-${elementIndex}-nombre">Nombre:</label> | |
| <input type="text" name="estudios-grupo-${elementIndex}-nombre" id=""> | |
| <label for="estudios-grupo-${elementIndex}-anno-egreso">Año de egreso:</label> | |
| <input type="number" name="estudios-grupo-${elementIndex}-anno-egreso" id="" min="1990" placeholder="(opcional)"> | |
| `; | |
| elementGroup.innerHTML = elementHTML; | |
| elementGroup.appendChild(btnDelete); | |
| console.log(elementIndex); | |
| container.appendChild(elementGroup); | |
| } | |
| function deleteGroup(e) { | |
| console.log("borrando...") | |
| let target = event.target || event.srcElement; | |
| let parent = target.parentElement | |
| parent.innerHTML = ""; | |
| elementCounter--; | |
| console.log(elementCounter); | |
| } | |
| document.getElementById("btn-add-group").addEventListener('click', () => {createGroup();}); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment