2016-04-08 5 views
3

Ich habe ein Formular zum Aktualisieren von MySQL-Datenbank mit PHP-Codes. Die Codes sind in Ordnung, und wenn ich das Formular absende, aktualisiert sich die Datenbank und das bedeutet, dass es gut funktioniert. Aber ich möchte eine Bestätigung Bootstrap-modal vor dem Absenden des Formulars erhalten. Dafür habe ich die folgenden Codes benutzt. Hier öffnet sich das Modal, aber wenn man auf OK klickt, funktioniert es nicht.beim Senden eines Formulars öffnet Bootstrap Modal, aber wenn Sie auf die Schaltfläche OK klicken, funktioniert es nicht

<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>   

      </form> 
      <!-- Modal --> 
<div class="modal fade" id="submit-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"></div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary" data-confirm="modal">OK</button> 
     </div> 
    </div> 
    </div> 
</div>   


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 

<!-- For modal --> 
<script src="js/confirm-bootstrap.js"></script> 
<script type="text/javascript">  
function salaryinfo(){ 
      return true; 
     }; 

    $(document).ready(function(){ 
     //modal delete confirm 
     $('button[data-toggle="modal-confirm"]').click(function(event) { 
      event.preventDefault(); 
      var self = $(this); 
      var message = self.data('message'); 
      var title = self.data('title'); 
      var target = $(self.data('target')); 
      var condition = self.data('condition'); 
      if(target.length == 1) { 
       target.find('.modal-title').html(title); 
       target.find('.modal-body').html(message); 
       var showModal = true; 
       var fn = window[condition]; 
       if(typeof fn === 'function') { 
        showModal = fn(condition); 
       } 
       if(showModal) { 
        target.on('shown.bs.modal', function(e) { 
         target.find('button[data-confirm="modal"]').click(function(e){ 
          e.preventDefault(); 
          var parentForm = self.closest('form'); 
          console.log(parentForm.html()); 
          if(parentForm.length == 1) { 
           parentForm.submit(); 
          } 
         }); 
        }); 
        target.modal({ show: true }); 
       }; 
      }; 
     }); 
    });  
    </script> 

Jeder Vorschlag für ein Arbeits modal?

Antwort

1

Sie senden zwar bereits die Form vor dem modalen öffnen, weil Ihre Taste den Wert einreichen:

<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>

So machen nur, dass eine normale Taste mit einem Datum Umschalten auf Ihre modal.

Und dann machen Sie die Bestätigungsschaltfläche auf Ihrem modal, um den Wert von submit zu haben.

Sie müssen auch Ihre modal enthalten in Ihrem <form> </form>

2

Sie das Formular Vorlage an die OK-Taste binden kann anstelle der Schaltfläche Senden.

Klicken Sie auf die Submit Schaltfläche: öffnen Sie das Modal.
Klicken Sie auf die Schaltfläche Ok: das Formular abschicken

eine ID zu Ihrem Formular <form id='my_form'> zuordnen.

eine ID zu Ihrer Ok Taste zuweisen
<button id='my_ok_button' type="button" class="btn btn-primary" data-confirm="modal">OK</button>

Bind das Formular Vorlage an Ihre Ok Taste

<script type='text/javascript'> 
    $(document).on('click', '#my_ok_button', function() { 
     $('#my_form').submit(); 
    })  
</script> 

Sie müssen jQuery enthalten für dieses Skript zu arbeiten.