0

Estoy trabajando sobre una web que no diseñé/programé yo. Ya tiene bootstrap y jQuery. La tarea era realizar una ventana modal sobre un formulario.

Al hacer clic en Enviar deberá de ejecutar esa ventana modal (para ésto utilice el bootstrap) y el envío final del formulario lo deberá de ejecutar la ventana modal, que realiza una pregunta

HTML:

<form id="contact" action="contacto.php" method="post">
        <!-- Campo engaño para spam-->
        <input type="text" name="e-mail" value="" style="height: 0px; opacity: 0" />

        <fieldset>
            <input name="nombre" placeholder="Su nombre" type="text" tabindex="1" required autofocus />
        </fieldset>
        <fieldset>
            <input name="email" placeholder="Su email" type="email" tabindex="2" required />
        </fieldset>
        <fieldset>
            <input name="tel" placeholder="Teléfono de contacto" type="tel" tabindex="3" required />
            <input name="es" id="es" type="hidden" tabindex="3" value="no" />
        </fieldset>
        <fieldset>
            <textarea name="mensaje" placeholder="Escriba su mensaje" tabindex="5" required></textarea>
        </fieldset>
        <fieldset>
            <button type="submit" name="submit" data-toggle="modal" data-target="#modal-envio" id="contact-submit" data-submit="...Enviar">
                Enviar
            </button>
        </fieldset>

Y éste es el js:

$("#contact").submit(function(evform) {
        evform.preventDefault();
    })

    $("#esDeudor").click(
        function() {
            $("#es").val("deudor");
            $("#contact").submit();
        }
    )

En éste caso solo tomo el botón "deudor" y no el otro, que sería igual solo que con diferente ID.

Y sucede que el submit() no se ejecuta. El submit lo que debe hacer es cargar una pagina PHP que manda los datos por email.

0

1 respuesta 1

1

No se puede enviar el formulario porque lo estás cancelando y puedes comprobarlo con este fragmento de código.

$('#mi-form').on('submit', function(e) {
    console.log('Cancelando envío');
    // Debes eliminar esta línea
    e.preventDefault();
});

// Asignar evento al botón para poder evitar que se envíe el formulario
$('#btn-enviar').on('click', e => {
    console.log('Cancelando acción de botón Enviar');
    // Cancelar envío
    e.preventDefault();
    // Aquí debes mostrar la ventana modal
});

// El botón de la ventana modal sí debe poder enviar
$('#btn-ok').on('click', e => {
    console.log('Enviar formulario');
    $('#mi-form').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="mi-form">
    <input type="text" name="nombre">
    <button type="submit" id="btn-enviar">Enviar</button>
</form>

<button id="btn-ok">Sí, enviar</button>

Lo que debes hacer es cancelar el evento del botón Enviar, ahí muestras la ventana modal y en el método submit() del formulario eliminas la línea evform.preventDefault();

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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