How can I add confirmation dialog to a submit button in html5 form?

Question

I am creating an application in django and I have the next problem: I have a form in html with a submit button, but I want to show a confirmation dialog to select Yes or No before processing the information. How could I do it?

This is my form code:

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

Thank you so much!

Answer 1

Have onsubmit attribute in your form tag like this if you just want a confirmation from user.

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: Or try below code

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

Answer 2

Try this:

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

And in your button add id attribute

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

Note : It is better to add script tag inside your html head tag

Answer 3

Check with the below link.

Fiddle

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

Answer 4

You can install JQuery plugin or write custom to 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>

Install JQuery plugin jquery.confirm

Answer 5

Before the submit you need to create a function to check if the user want to confirm the request. You could use the "confirm()" function with the preventDefault() to stop the submit, and if true you send the submit or change your type=submit to a button, and in the function just confirm if the user want to continue and send the request.

Answer 6

add a javascript function on its onclick event. for example:

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

and add the javascript function

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