Twitter Bootstrap Modal Formular Submit

Question

Ich habe vor kurzem mit Twitter Bootstrap, java/jboss, herumspielen und ich habe versucht, ein Formular von einer Modal-Schnittstelle zu übermitteln, enthält das Formular nur ein verstecktes Feld und nichts anderes Anzeige usw. ist unwichtig.

Die Form ist außerhalb des modalen selbst, und ich kann einfach nicht herausfinden, wie dies möglich wäre

ich habe versucht, Hinzufügen der Modal sich auf die Form, versucht, HTML5 Form = "form_list gewöhnungs "und sogar Hinzufügen des Formulars zum modalen Körper und mit etwas jquery, um eine Übermittlung zu erzwingen, aber nichts scheint zu funktionieren versuchen, jquery-Funktionen aufzurufen.

<div class='modal small hide fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
     <div class='modal-header'> 
      <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> 
      <h3 id='myModalLabel'>Delete Confirmation</h3> 
     </div> 
     <div class='modal-body'> 
      <p class='error-text'>Are you sure you want to delete the user?</p> 
     </div>"); 
     <div class='modal-footer'> 
     <button class='btn btn-danger' data-dismiss='modal' aria-hidden='true'>Cancel</button> 
     <button class='btn btn-success' data-dismiss='modal'>Ok</button> 
     </div> 
    </div> 

Answer 1

Möchten Sie das Modal nach dem Senden schließen? Ob die Form innerhalb des Modals oder extern zu ihr ist, sollten Sie in der Lage sein, jQuery Ajax zu verwenden, um das Formular zu senden. Hier

ist ein Beispiel mit der Form im Inneren des modal:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <form id="myForm" method="post"> 
      <input type="hidden" value="hello" id="myField"> 
      <button id="myFormSubmit" type="submit">Submit</button> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

Und die jquery ajax die Formularfelder zu erhalten und legt ihn ..

$('#myFormSubmit').click(function(e){ 
     e.preventDefault(); 
     alert($('#myField').val()); 
     /* 
     $.post('http://path/to/post', 
     $('#myForm').serialize(), 
     function(data, status, xhr){ 
      // do something here with response; 
     }); 
     */ 
}); 

Arbeiten an Bootply: http://bootply.com/59864

Answer 2

Diese Antwort ist spät, aber ich poste trotzdem und hoffe, dass es jemandem hilft. Wie Sie hatte ich auch Schwierigkeiten, ein Formular zu senden, das sich außerhalb meines Bootstrap-Modals befand, und ich wollte keinen AJAX verwenden, da ich eine ganz neue Seite laden wollte, nicht nur einen Teil der aktuellen Seite. Nach viel Versuch und Irrtum hier ist die jQuery die für mich gearbeitet:

$(function() { 
    $('body').on('click', '.odom-submit', function (e) { 
     $(this.form).submit(); 
     $('#myModal').modal('hide'); 
    }); 
}); 

Um diese Arbeit mache ich diese

im Modal Footer tat

<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary odom-submit">Save changes</button> 
</div> 

Beachten Sie die zusätzlich zur Klasse von Odom-vorlegen. Sie können es natürlich so nennen, wie es Ihrer speziellen Situation entspricht.

Answer 3

Alt, aber vielleicht nützlich für Leser, um ein komplettes Beispiel zu haben, wie modal zu verwenden.

ich wie folgt (working example jsfiddle):

$('button.btn.btn-success').click(function(event) 
{ 

event.preventDefault(); 

$.post('getpostcodescript.php', $('form').serialize(), function(data, status, xhr) 
    { 
     // do something here with response; 
     console.info(data); 
     console.info(status); 
     console.info(xhr); 
    }) 
    .done(function() { 
     // do something here if done ; 
     alert("saved"); 
    }) 
    .fail(function() { 
     // do something here if there is an error ; 
     alert("error"); 
    }) 
    .always(function() { 
     // maybe the good state to close the modal 
     alert("finished"); 
     // Set a timeout to hide the element again 
     setTimeout(function(){ 
      $("#myModal").hide(); 
     }, 3000); 
    }); 
}); 

Um leichter mit Modalverben zu umgehen, empfehle ich eModal verwenden, die schneller auf den Einsatz von 3 modals Bootstrap-Basis zu gehen erlauben.

Answer 4

Sie können auch in irgendeiner Weise schummeln, indem Sie eine Absenden-Schaltfläche in Ihrem Formular ausblenden und sie auslösen, wenn Sie auf Ihre modale Schaltfläche klicken.