1

tengo un problema con un botón y lo que pasa es que cuando toco el botón de "Contáctanos" funciona todo bien hasta que lo cierro o lo envio, el problema pasa cuando quiero abrirlo de nuevo una vez hecho esto y no me deja, lo que lo hace un botón de un único uso, cosa que no quiero. Aquí está el dialog en HTML:

<button class="button open-button hero-btn">Contáctanos</button>
            <dialog class="container modal" id="modal">
                <form class="form" method="post" action="https://formsubmit.co/aebbad3500545f6a1b453acc0a5c33bf">
                    <button class="closeForm"><i class="fa-solid fa-xmark"></i></button>
                    <h2>Envianos un email</h2>
                    <input type="text" name="Nombre" id="name" placeholder="Tu nombre y apellido" required>
                    <input type="email" name="email" id="email" placeholder="Tu email" required>
                    <input type="text" name="Teléfono" id="phone" placeholder="Número de teléfono" >
                    <textarea name="Consulta" id="message" rows="4" placeholder="Como te podemos ayudar?" required></textarea>
                    <input type="submit" class="send" value="Enviar"/>
                </form>
            </dialog>

Y aquí el js el modal:

const modal= document.querySelector('dialog');
        const openModal = document.querySelector(".open-button");
        const closeModal = document.querySelector(".closeForm");
        const sendModal = document.querySelector(".send");

        modal.style.display = 'none';

        openModal.addEventListener("click", () => {
            modal.showModal();
            modal.style.display = 'flex';
        });

        closeModal.addEventListener("click", () => {
            modal.style.display = 'none';
        });

        sendModal.addEventListener("click", () => {
            modal.style.display = 'none';
        });
1
  • Sería mejor usar un toggle. Puedes usar y editar un archivo CSS ? el 23 mar. 2022 a las 17:59

1 respuesta 1

0

Bueno el problema era detalles.

Asumiendo que si todo funciona bien, estas cerrando tu modal con el input type="submit" después de enviar los datos, o no?

El problema era que estaba demás: modal.showModal();.

const modal= document.querySelector('dialog'); 
const openModal = document.querySelector(".open-button"); 
const closeModal = document.querySelector(".closeForm"); 
const sendModal = document.querySelector(".send"); 
modal.style.display = 'none'; 

openModal.addEventListener("click", () => {
 
 //modal.showModal(); 
 modal.style.display = 'flex'; 

}); 

closeModal.addEventListener("click", () => {
 
 modal.style.display = 'none'; 

}); 

sendModal.addEventListener("click", () => {
 
 modal.style.display = 'none'; 

});
<button class="button open-button hero-btn">Contáctanos</button> 
  
  
  <dialog class="container modal" id="modal"> 
   
   <form class="form" method="post" action="https://formsubmit.co/aebbad3500545f6a1b453acc0a5c33bf"> 

<button class="closeForm">
 <i class="fa-solid fa-xmark"></i>
 Cerrar
</button> 

<h2>Envianos un email</h2> 

<input type="text" name="Nombre" id="name" placeholder="Tu nombre y apellido" required> 

<input type="email" name="email" id="email" placeholder="Tu email" required> 

<input type="text" name="Teléfono" id="phone" placeholder="Número de teléfono" > 

<textarea name="Consulta" id="message" rows="4" placeholder="Como te podemos ayudar?" required></textarea> 

<input type="submit" class="send" value="Enviar"/> 

   </form> 
   
  </dialog>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.