Bootstrap Modal trước form Gửi

Question

Tôi mới vào Modals, tôi có một Form và khi người dùng nhấp vào gửi, Nó sẽ hiển thị một Modal xác nhận nếu người dùng muốn gửi, phương thức cũng chứa đầu vào của người dùng từ các trường biểu mẫu . Tôi đã tìm kiếm tất cả trên internet nhưng không thể tìm được đúng nhu cầu của mình. Và tất cả những gì tôi thấy là họ gắn thẻ sự kiện nhấp để mở phương thức trên một liên kết. tôi có một loại đầu vào gửi. Bạn có thể đưa ra các ví dụ hoặc ý tưởng? Cảm ơn! Đây là mẫu của tôi.

<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> 

Answer 1

Vì vậy, nếu tôi nhận được điều đó đúng, trên một nút bấm, bạn muốn mở ra một phương thức liệt kê các giá trị nhập vào bởi người sử dụng theo dõi bằng cách gửi nó.

Đối với điều này, trước tiên bạn thay đổi của bạn input type="submit" để input type="button" và thêm data-toggle="modal" data-target="#confirm-submit" để các phương thức được kích hoạt khi bạn click vào nó:

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

Tiếp theo, hộp thoại 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="#" id="submit" class="btn btn-success success">Submit</a> 
     </div> 
    </div> 
</div> 

Cuối cùng, một chút 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(); 
}); 

Bạn chưa chỉ định chức năng validateForm(), nhưng dựa trên điều này, bạn nên hạn chế gửi biểu mẫu của mình. Hoặc bạn có thể chạy chức năng đó trên nút của biểu mẫu #submitBtn nhấp và sau đó tải phương thức sau khi xác thực đã được kiểm tra.

DEMO

Answer 2

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

Answer 3

Nó rất dễ dàng để giải quyết, chỉ tạo một hidden nộp:

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

với jQuery bạn nhấp vào trình:

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