Estoy aprendiendo Javascript y he estudiado estos casos similares 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 sin éxito. No uso dependencias como jQuery o Bootstrap.
Quiero reemplazar alert("¡Éxito!"); con algo como document.getElementById('modal-team').showModal(); en el siguiente código, para mostrar un modal y mantener al usuario en la misma página:
window.addEventListener("load", function() { const form = document.getElementById('registration'); form.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(form); const action = e.target.action; fetch(action, { method: 'POST', body: data, }) .then(() => { alert("Success!"); }) }); });¿Puedes ayudarme?
Los modales no existen en el estándar JavaScript o HTML. Para definir el concepto, tienes dos opciones:
Las preguntas enumeradas anteriormente usan la implementación de modales de Bootstrap y, por lo tanto, solo se aplicarían si usara Bootstrap.
Un modal no es particularmente difícil de implementar sin una biblioteca, pero debe considerar resolver algunos problemas:
<body> o en el nivel .modal-body )Todo lo anterior ya está resuelto en la mayoría de las implementaciones modales, por lo que las personas prefieren usarlos en lugar de escribir los suyos propios.
Para responder a su pregunta específica, un HTMLDivElement no tiene un método .showModal() . Antes de que pueda llamar a un método de este tipo, primero debe definirlo.
Lo descubro usando una ruta diferente, pero usando más código que no me gusta .
Usó el mismo js para interceptar (simplemente eliminó .then ):
window.addEventListener("load", function() { const t = document.getElementById("infobar"); t.addEventListener("submit", function(e) { e.preventDefault(); const n = new FormData(t), o = e.target.action; fetch(o, { method: "POST", body: data, }) }) });Llame a una función onsubmit para un formulario con una identificación única:
<form onsubmit="Dia()" id="infobar" name="form" method="post" action="blablabla"> <input type="email" name="Email" placeholder="Email here"> <input type="submit" value="Join"></form>La función js que sirve el formulario:
function Dia(){document.getElementById("Di").showModal()};El modal que muestra la función js (usó el cuadro de diálogo ya que es compatible con los navegadores modernos 1 ):
<dialog id="Di">👍🏽 Received.</dialog>Si alguien puede proporcionar una solución con menos código (y para múltiples identificaciones), para el mismo resultado sin dependencias, sea mi invitado ; Me encantaría aprender.