Bootstrap Modal перед формой Отправить

Я новичок в Modals, у меня есть форма, и когда пользователь нажимает кнопку submit, он покажет Modal, подтверждающий, хочет ли пользователь отправить, модальный также содержит пользовательский ввод из полей формы. Я искал по всему Интернету, но не могу найти правильный ответ на мои потребности. И все, что я вижу, это то, что они отмечают событие click, чтобы открыть модальную ссылку. У меня есть входной тип submit. Можете ли вы привести примеры или идеи? Благодарю! Вот моя форма образца.

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>

Ответ 1

Итак, если я правильно понял, щелкнув по кнопке, вы хотите открыть модальный, который отображает значения, введенные пользователями, после чего отправляет их.

Для этого сначала измените свой input type="submit" на input type="button" и добавьте data-toggle="modal" data-target="#confirm-submit", чтобы модаль активировался при нажатии на него:

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

Далее модальный диалог:

<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="#" id="submit" class="btn btn-success success">Submit</a>
        </div>
    </div>
</div>

Наконец, немного 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();
});

Вы не указали, что делает функция validateForm(), но на основании этого вы должны запретить отправку своей формы. Или вы можете запустить эту функцию на кнопке формы #submitBtn, а затем загрузить модальную версию после проверки проверки.

DEMO

Ответ 2

$('form button[type="submit"]').on('click', function () {
   $(this).parents('form').submit();
});

Ответ 3

Это легко решить, только создайте скрытый submit:

<button id="submitCadastro" type="button">ENVIAR</button>
<input type="submit" id="submitCadastroHidden" style="display: none;" >

с jQuery вы нажмете submit:

$("#submitCadastro").click(function(){
    if($("#checkDocumentos").prop("checked") == false){
        //alert("Aceite os termos e condições primeiro!.");
        $("#modalERROR").modal("show");
    }else{
        //$("#formCadastro").submit();
        $("#submitCadastroHidden").click();                     
    }
});