फॉर्म से पहले बूटस्ट्रैप मॉडल

Question

मैं मॉडलों के लिए नया हूं, मेरे पास एक फॉर्म है और जब उपयोगकर्ता सबमिट करता है, तो यह एक मॉडल को दिखाएगा कि उपयोगकर्ता सबमिट करना चाहता है, तो मोडल में फॉर्म फ़ील्ड से उपयोगकर्ता इनपुट भी शामिल है । मैंने पूरे इंटरनेट पर खोज की लेकिन मेरी ज़रूरतों पर सही नहीं मिला। और मैं देखता हूं कि वे क्लिक ईवेंट को एक लिंक पर मोडल खोलने के लिए टैग करते हैं। मेरे पास इनपुट प्रकार सबमिट है। क्या आप उदाहरण या विचार दे सकते हैं? धन्यवाद! मेरा नमूना फॉर्म यहाँ है।

<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

तो अगर मैं इसे सही, एक बटन के क्लिक पर, आप एक मॉडल है कि मूल्यों उपयोगकर्ताओं इसे प्रस्तुत करने के बाद द्वारा दर्ज सूचीबद्ध करता है को खोलने के लिए चाहते हैं।

इस के लिए, आप पहली बार अपने 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

Answer 2

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

Answer 3

यह हल करने के लिए आसान है, केवल बनाने के एक छिपा सबमिट करें:

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

jQuery के साथ

आप क्लिक कर सबमिट करें:

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