web-dev-qa-db-fra.com

Bootstrap Modal avant formulaire Soumettre

Je suis nouveau dans Modals, j'ai un formulaire et lorsque l'utilisateur clique sur soumettre, un modal indiquant si l'utilisateur souhaite soumettre est affiché. Le modal contient également les données saisies dans les champs du formulaire. J'ai cherché partout sur Internet mais je ne trouve pas le bon sur mes besoins. Et tout ce que je vois, c'est qu'ils taguent l'événement click pour ouvrir modal sur un lien. J'ai un type d'entrée soumettre. Pouvez-vous donner des exemples ou des idées? Merci! Voici mon exemple de formulaire.

<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

Donc, si je comprends bien, en un clic, vous voulez ouvrir un modal qui répertorie les valeurs entrées par les utilisateurs, puis en le soumettant.

Pour cela, vous devez d'abord changer votre input type="submit" en input type="button" et ajouter data-toggle="modal" data-target="#confirm-submit" pour que le modal soit déclenché lorsque vous cliquez dessus:

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

Ensuite, le dialogue modal:

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

Enfin, un peu de 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();
});

Vous n'avez pas spécifié le rôle de la fonction validateForm(), mais sur cette base, vous devez limiter la soumission de votre formulaire. Ou vous pouvez exécuter cette fonction sur le bouton du formulaire #submitBtn cliquez sur, puis chargez le modal après vérification des validations.

D&EACUTE;MO

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

J'ai remarqué que certaines des réponses ne déclenchaient pas l'attribut HTML5 required (car des actions étaient exécutées sur l'action de en cliquant sur plutôt que sur l'action de form send, ce qui entraînait son contournement lorsque les entrées étaient vides). :

  1. Avoir un <form id='xform'></form> avec certaines entrées avec l'attribut requis et placer un <input type='submit'> à la fin.
  2. Une entrée de confirmation où l'on attend "ok" <input type='text' name='xconf' value='' required>
  3. Ajoutez un modal_1_confirm à votre code HTML (pour confirmer le formulaire d’envoi).
  4. (sur modal_1_confirm) ajoutez le id modal_1_accept au bouton d'acceptation.
  5. Ajoutez un deuxième modal_2_errMsg à votre code HTML (pour afficher les erreurs de validation de formulaire).
  6. (sur modal_2_errMsg) ajoutez le code id modal_2_accept au bouton d'acceptation.
  7. (sur modal_2_errMsg) ajoutez le id m2_Txt au support de texte affiché.

  8. Le JS à intercepter avant que le formulaire ne soit envoyé:

    $("#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. Aussi quelques trucs en cliquant sur les boutons des modaux:

$("#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");
});

Remarque importante: Alors, soyez prudent si vous ajoutez un moyen supplémentaire d'afficher le modal, car un simple clic sur le bouton d'acceptation $("#modal_1_accept") supposera que la validation a été transmise et qu'il ajoutera l'attribut "ready":

  • La raison en est que $("#modal_1_confirm").modal("show"); est affiché seulement quand il a passé la validation .__, de sorte que cliquer sur $("#modal_1_accept") devrait être Inaccessible sans que le formulaire ne soit préalablement validé.
0
ajax333221