• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

107
Views
¿Existe una forma correcta de agregar dinámicamente "formularios" en un contenedor div con solo JavaScript?

Estoy tratando de crear un formulario dinámico solo con html, css y JavaScript (o un poco de JQuery), así que mi problema es que tengo esto:

 <div class="form-item"> <label for="form-container">Random Title:</label> <div id="form-container"> ***Here is where I add dynamic "forms"*** </div> <div> <button type="button" class="add-form" onclick="AddForm()">Add form</button> </div> </div>

y el JavaScript es (no sé si es la mejor solución pero al menos funciona jaja):

 function addForm(){ let container= document.getElementById('form-container'); if (cnt<5){ cnt+=1; container.innerHTML += `***the form but write on HTML format***`; } else { alert("¡you cant add anymore!"); } }

y necesito algo similar pero para eliminar los formularios que agregué con el botón de agregar dinámico.

(el formulario está entre "" porque en realidad no es un formulario, es solo un div con entradas dentro, porque es parte de un formulario más grande con otras entradas en otros divs)

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Por lo general , no es una buena idea usar controladores de eventos en línea ( <button onclick=... ).

Aquí hay un ejemplo reproducible mínimo donde el manejo delegado maneja la creación, el envío y la eliminación de un máximo de 5 formularios dinámicos dentro de div#form-container .

Zona de juegos para este código.

 const maxForms = 5; document.addEventListener(`click`, handle); function createFormHTML(n) { if (n > maxForms) { return alert(`No more forms allowed`); } return ` <div data-dynamicform="${n}"> <input type="text" placeholder="type something!"> <button class="submit">Submbit</button> <button class="erase">Delete form</button> </div>`; } function handle(evt) { console.clear(); if (evt.target.classList.contains(`add-form`)) { const container = document.querySelector(`#form-container`); container.dataset.nforms = +container.dataset.nforms + 1; const newForm = createFormHTML(+container.dataset.nforms); return newForm && container .insertAdjacentHTML(`beforeend`, newForm) || true; } if( evt.target.classList.contains(`submit`)) { return console.log(`submitted form #${ evt.target.closest(`[data-dynamicform]`).dataset.dynamicform}`); } if (evt.target.classList.contains(`erase`)) { evt.target.closest(`[data-dynamicform]`).remove(); const dynamicForms = document.querySelectorAll(`[data-dynamicform]`); dynamicForms.length && dynamicForms .forEach( (form, i) => form.dataset.dynamicform = i + 1 ); document.querySelector(`#form-container`).dataset.nforms = dynamicForms.length; } }
 body { margin: 1rem; font: normal 12px/15px verdana,arial; } #form-container { padding: 4px; } #form-container [data-dynamicform] { margin-bottom: 4px; }
 <div class="form-item"> <div> <button type="button" class="add-form">Add form</button> </div> <div id="form-container" data-nforms="0"> <h4>Your forms</h4> </div> </div>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error