Bootstrap Modal antes de enviar el formulario

Solución:

Entonces, si lo hago bien, al hacer clic en un botón, desea abrir un modal que enumere los valores ingresados ​​por los usuarios y luego enviarlo.

Para esto, primero cambie su input type="submit" para input type="button" y añadir data-toggle="modal" data-target="#confirm-submit" para que el modal se active al hacer clic en él:

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />

A continuación, el diálogo modal:

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="https://foroayuda.es/#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

Por último, un poco de jQuery:

$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#lname').text($('#lastname').val());
     $('#fname').text($('#firstname').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
});

No has especificado cuál es la función validateForm() lo hace, pero en función de esto, debe restringir el envío de su formulario. O puede ejecutar esa función en el botón del formulario #submitBtn haga clic y luego cargue el modal después de que se hayan verificado las validaciones.

MANIFESTACIÓN

---

---

Utiliza Nuestro Buscador