web-dev-qa-db-de.com

Twitter Bootstrap Modal Form Senden

Ich habe vor kurzem mit Twitter bootstrap herumgespielt und Java/jboss verwendet. Ich habe versucht, ein Formular über eine modale Benutzeroberfläche zu senden. Das Formular enthält nur ein ausgeblendetes Feld und nichts anderes, also die Anzeige usw. ist unwichtig.

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

ich habe versucht, das Modal selbst in das Formular einzufügen, versuchte HTML5 mit form = "form_list" zu verwenden und das Formular sogar dem modalen Körper hinzuzufügen und Jquery zu verwenden, um ein Submit zu erzwingen, aber nichts scheint zu funktionieren

Nachfolgend finden Sie ein Beispiel für einen Modalversuch, bei dem ich versuchte, das zu ergänzen, was ich brauchte. Der OK-Button war zuvor der Schnitt, um zu 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>
14
user1890266

Aktualisiert 2018

Möchten Sie den Modal nach dem Absenden schließen? Unabhängig davon, ob sich das Formular innerhalb des Modals oder außerhalb davon befindet, sollten Sie jQuery ajax zum Senden des Formulars verwenden können.

Hier ist ein Beispiel mit dem -Format in der 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 das jQuery-ajax, um die Formularfelder abzurufen und zu übermitteln.

$('#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;
         });
      */
});

Bootstrap 3 Beispiel


Bootstrap 4 Beispiel

26
Zim

Diese Antwort ist spät, aber ich poste sowieso in der Hoffnung, dass es jemandem helfen wird. Wie Sie hatte ich auch Schwierigkeiten beim Senden eines Formulars, das sich außerhalb meines Bootstrap-Modals befand, und ich wollte ajax nicht verwenden, weil ich wollte, dass eine ganze neue Seite geladen wird, nicht nur ein Teil der aktuellen Seite. Nach vielem Ausprobieren ist hier die jQuery, die für mich funktioniert hat:

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

Um dies zu erreichen, habe ich dies in der modalen Fußzeile gemacht

<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 den Zusatz zur Klasse von odom-submit. Sie können es natürlich so nennen, wie es Ihrer speziellen Situation entspricht.

14
rjacobsen0

Alt, aber vielleicht nützlich für Leser, um ein vollständiges Beispiel für die Verwendung von Modal zu erhalten.

Ich mag folgendes ( Arbeitsbeispiel 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 den Umgang mit Modalen zu vereinfachen, empfehle ich die Verwendung von eModal , wodurch die Verwendung von Bootstrap 3-Modalen schneller erfolgen kann.

1
Mike

Einfach

<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" onclick="event.preventDefault();document.getElementById('your-form').submit();">Save changes</button>

1
Jonh bert

Sie können auch auf irgendeine Weise cheaten, indem Sie einen Submit-Button in Ihrem Formular ausblenden und ihn auslösen, wenn Sie auf Ihren Modal-Button klicken. 

0
Robin P