wake-up-neo.com

Bootstrap Modal vor dem Formular Senden

Ich bin neu bei Modals, ich habe ein Formular und wenn der Benutzer auf "Senden" klickt, wird ein Modal angezeigt, in dem bestätigt wird, dass der Benutzer "Senden" möchte. Das Modal enthält auch die Benutzereingabe aus den Formularfeldern. Ich habe im ganzen Internet gesucht, finde aber nicht das Richtige für meine Bedürfnisse. Und alles was ich sehe ist, dass sie das Klickereignis markieren, um modal auf einem Link zu öffnen. Ich habe eine Eingabeart. Kannst du Beispiele oder Ideen geben? Vielen Dank! Hier ist mein Beispielformular.

<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>
javascriptjquerytwitter-bootstrapmodal-dialog
29
user3651491

Wenn ich es richtig verstanden habe, möchten Sie mit einem Klick auf eine Schaltfläche ein Modal öffnen, das die von den Benutzern eingegebenen Werte auflistet und sie anschließend sendet.

Dazu ändern Sie zunächst Ihren input type="submit" in input type="button" und fügen Sie data-toggle="modal" data-target="#confirm-submit" hinzu, damit der Modal beim Anklicken ausgelöst wird:

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

Als Nächstes den modalen Dialog:

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

Zum Schluss noch ein bisschen 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();
});

Sie haben nicht angegeben, was die Funktion validateForm() tut, aber basierend darauf sollten Sie die Übermittlung Ihres Formulars einschränken. Sie können diese Funktion auch über den Button #submitBtn click des Formulars ausführen und dann das Modal laden, nachdem die Gültigkeitsprüfungen überprüft wurden.

DEMO

46
I Can Has Kittenz
$('form button[type="submit"]').on('click', function () {
   $(this).parents('form').submit();
});
0
Abdo-Host

Ich bemerkte, dass einige der Antworten nicht das HTML5-Attribut required auslösten (da bei der Aktion click eher etwas ausgeführt wurde als bei der Aktion form send, wodurch es umgangen wurde, wenn die Eingaben leer waren.) :

  1. Haben Sie einen <form id='xform'></form> mit einigen Eingaben mit dem erforderlichen Attribut und setzen Sie am Ende einen <input type='submit'>.
  2. Eine Bestätigungseingabe, bei der die Eingabe von "ok" erwartet wird <input type='text' name='xconf' value='' required>
  3. Fügen Sie Ihrer HTML-Datei ein modal_1_confirm hinzu (zur Bestätigung der Versandart).
  4. (bei modal_1_confirm) füge den idmodal_1_accept zum Accept Button hinzu.
  5. Fügen Sie ein zweites modal_2_errMsg zu Ihrer HTML-Datei hinzu (um Fehler bei der Formularüberprüfung anzuzeigen).
  6. (bei modal_2_errMsg) fügen Sie der Akzeptierungsschaltfläche den idmodal_2_accept hinzu.
  7. (bei modal_2_errMsg) fügen Sie dem angezeigten Texthalter den idm2_Txt hinzu.

  8. Die JS, die abgefangen werden soll, bevor das Formular gesendet wird:

    $("#xform").submit(function(e){
    var msg, conf, preventSend;

    if($("#xform").attr("data-send")!=="ready"){
        msg="Error."; //default error msg
        preventSend=false;

        conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, "");

        if(conf===""){
            msg="The field is empty.";
            preventSend=true;
        }else if(conf!=="ok"){
            msg="You didn't write \"ok\" correctly.";
            preventSend=true;
        }

        if(preventSend){ //validation failed, show the error
            $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg
            $("#modal_2_errMsg").modal("show");
        }else{ //validation passed, now let's confirm the action
            $("#modal_1_confirm").modal("show");
        }

        e.preventDefault();
        return false;
    }
});

`9. Auch ein paar Sachen, wenn Sie auf die Buttons der Modals klicken:

$("#modal_1_accept").click(function(){
    $("#modal_1_confirm").modal("hide");
    $("#xform").attr("data-send", "ready").submit();
});

$("#modal_2_accept").click(function(){
    $("#modal_2_errMsg").modal("hide");
});

Wichtiger Hinweis: Seien Sie also vorsichtig, wenn Sie eine zusätzliche Möglichkeit zum Anzeigen des Modals hinzufügen. Wenn Sie auf die Schaltfläche "Akzeptieren" klicken, geht $("#modal_1_accept") davon aus, dass die Bestätigung bestanden wurde, und fügt das Attribut "ready" hinzu:

  • Der Grund dafür ist, dass $("#modal_1_confirm").modal("show");only angezeigt wird, wenn __. Die Validierung bestanden hat. Wenn Sie auf $("#modal_1_accept") klicken, sollte Nicht erreichbar sein, ohne dass das Formular zuerst validiert wurde.
0
ajax333221

Sie können das standardmäßige Eingabeaufforderungsfenster des Browsers verwenden. Anstelle von basic <input type="submit" (...) > versuchen Sie:

<button onClick="if(confirm(\'are you sure ?\')){ this.form.submit() }">Save</button>
0
Matt