Comment puis-je ajouter de la boîte de dialogue de confirmation à un bouton de soumission de formulaire html5?

Je suis en création d'une application en django et j'ai le problème suivant: j'ai un formulaire en html avec un bouton, mais je veux afficher une boîte de dialogue de confirmation pour sélectionner Yes ou No avant le traitement de l'information. Comment pourrais-je le faire?

C'est mon code du formulaire:

<form id="id" method="post" action="/y/b/" enctype="multipart/form-data">

    {% csrf_token %} 

    {{ form.as_p }}

    <input class="btn btn-primary" type="submit" name="submit" value="A" />
</form>

Merci beaucoup!

OriginalL'auteur jartymcfly | 2015-08-12

Ont onsubmit attribut dans la balise de formulaire comme si vous voulez juste une confirmation de la part de l'utilisateur.

https://jsfiddle.net/yetn60ja/

<form id="id"
    method="POST" action="/y/b/"
    enctype="multipart/form-data"
    onsubmit="return confirm('Do you really want to submit the form?');"
>
    <input class="btn btn-primary"
        type="submit" name="submit" value="A"
    />
</form>

EDIT: Ou d'essayer de code ci-dessous

<form id="id"
    method="POST" action="/y/b/"
    enctype="multipart/form-data"
>
    <input class="btn btn-primary"
        type="submit" name="submit" value="A"
        onclick="return confirm('Do you really want to submit the form?');"
    />
</form>

J'ai essayé, mais il n'affiche pas la boîte de dialogue de confirmation et il proccesses directement le code...
veuillez voir mon édité répondre
Okey, je l'ai eu! Merci!!
J'ai un autre problème. La boîte de dialogue de confirmation s'affiche, mais le soumettre proccessing continue insted de l'apparence de la boîte de dialogue. Pourquoi ccould il se passer?

OriginalL'auteur Akki619

Vérifier avec le lien ci-dessous.

Violon

 function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    //Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
    if (value) {
        alert("Confirmed");
    } else {
        alert("Rejected");
    }
}

OriginalL'auteur Steevan

Vous pouvez installer le plugin JQuery ou écrire personnalisé pour code

 <input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
    <div id="dialog-confirm"></div>
<script>
function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    //Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
    if (value) {
        alert("Confirmed");
    } else {
        alert("Rejected");
   }
} </script>

Installer le plugin JQuery jquery.confirmer

OriginalL'auteur Muhammad Nasir

Essayez ceci:

<script>
    var element = document.getElementById('submitBtn').click = function () {
           if(confirm("Are sure you want to submit the form")) {
               //do what ever you want if the form is submitted.
           }
        };
</script>

Et votre bouton ajouter un attribut id

<input id='submitBtn' class="btn btn-primary" type="submit" name="submit" value="A" />

Note: Il est préférable d'ajouter script balise à l'intérieur de votre code html head tag

OriginalL'auteur Kiren Siva

0

Avant de le soumettre, vous devez créer une fonction pour vérifier si l'utilisateur pour confirmer la demande.
Vous pouvez utiliser le "confirm()" fonction avec la preventDefault() pour arrêter la soumettre, et si la valeur est true, vous envoyez le soumettre ou de modifier votre type=submit à un bouton, et dans la fonction juste de confirmer si l'utilisateur veux continuer, et envoyer la demande.

Pouvez-vous me montrer un exemple, s'il vous plaît...?
Je suppose que vous n'êtes pas à l'aide de Jquery, afin de: Créer votre fonction: fonction checkConfirm(){ var conf = confirm("voulez continuer?"); (conf) ? document.getElementById("id").submit(); : alert("Demande annulé!"); } Et de changer votre bouton: <input class="btn btn-primary" type="button" name="submit" value="" onclick="checkConfirm();">

OriginalL'auteur Luiz Pillon

ajouter une fonction javascript sur son événement onclick.
par exemple:

<input class="btn btn-primary" type="submit" onclick="clicked();" name="submit" value="A" />

et ajouter la fonction javascript

function clicked() {
       if (confirm('Do you wanna to submit?')) {
           yourformelement.submit();
       } else {
           return false;
       }
    }

OriginalL'auteur Venkatvasan

Vous devez vous connecter pour publier un commentaire.