form submit_ask for confirmation

Using Django
1

How could it be implemented a popup confirmation when a submit button in a Django form is clicked?
It would help in case the user accidentally clicks on the submit button. I guess it could be done using a JS function with an addEventListener click function. But I don’t know how to code the function itself.

eg:

<form action="" method="post">
    ...
    <input type="submit" value="Submit" id="submitID">
</form>

<script type="text/javascript">
    var inputElement = document.getElementById("submitID")
    inputElement.addEventListener("click", function() {  ¿¿¿...???  }
</script>

Thanks

2

This is a JavaScript issue, and the precise answer will likely depend upon whether you’re using some JS framework and which one.

I don’t have a snippet I can share, but what we’ve done for this type of situation is not create a “submit” button. Instead, we use a regular button, that when clicked, brings up the confirmation dialog. If “Submit” is clicked on it, then the JavaScript does the submission of the form.

2 Likes
3

Thanks for your answer.

I am not using any specific JS framework. Just Bootstrap toolkit for styling.

I have been trying the following, but the confirmation dialog does not even appear:

<form action="" method="post" id="newProjectForm">
    ...
    <input type="button" name="SubmitButton" value="Submit" id="submitButton">
</form>

<script type="text/javascript">
    var inputElement = document.getElementById("submitButton")
    inputElement.addEventListener("click", function() {
        if confirm('Do you want to submit?') {
            document.getElementById("newProjectForm").submit()
        } else {
            return false;
        }
    })

</script>
4

Something strange is happening here, because I use the same code in a new html file, and it works as expected.

5

Ok, solved. I was placing the <script>...</script> outside the <body>...</body> and the JS was not being read.
I did not realize since I was using a base.html file extended in my html file.

Thanks @KenWhitesell