Confirm Before a Form Submit

JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

A simple inline JavaScript confirm would suffice:

<form onsubmit="return confirm('Do you really want to submit the form?');">

No need for an external function unless you are doing validation, which you can do something like this:

<script>
function validate(form) {

    // validation code here ...

    if(!valid) {
        alert('Please correct the errors in the form!');
        return false;
    }
    else {
        return confirm('Do you really want to submit the form?');
    }
}
</script>
<form onsubmit="return validate(this);">

Confirm Before Form Submission

From a comment by the OP:

echo "onclick='return confirm(\'Are you sure you want to submit this form?\');'"

You can't use single quotes in an attribute value delimited with single quotes.

Your options are:

Use double quotes in the JS

echo "onclick='return confirm(\"Are you sure you want to submit this form?\");'"

Use double quotes in the HTML

echo "onclick=\"return confirm('Are you sure you want to submit this form?');\""

Use entities

echo "onclick='return confirm("Are you sure you want to submit this form?");\""

When out you put JavaScript inside an HTML attribute value inside a PHP string you have three different languages all mixed together, and you have to be very, very careful with your escaping so that you escape the right characters for the right languages at the right times.

As a rule of thumb, it is better to keep that contents of PHP strings to a minimum. Only drop into PHP mode when you have a variable.

?>
    <form method='POST' action='delete.php'>
        <input type='image' src='images/delete.png' class='del' alt='Submit Form' onclick="return confirm('Are you sure you want to submit this form?');" />
    </form>
<?php

For the same reason, it is better to keep your JavaScript in an external file and attach event handlers with addEventListener instead of onFOO attributes.

Add a confirmation alert before submitting a form

Instead of alert, you have to use confirm and return in your form, for an example:

<form 
    method="post"
    onSubmit="return confirm('Are you sure you wish to delete?');">
...
</form>

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

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>

Confirm before a form submit

HTML:

<form action="adminprocess.php" method="POST" id="myCoolForm">
    <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

JavaScript:

var el = document.getElementById('myCoolForm');

el.addEventListener('submit', function(){
    return confirm('Are you sure you want to submit this form?');
}, false);

Edit: you can always use inline JS code like this:

<form action="adminprocess.php" method="POST" onsubmit="return confirm('Are you sure you want to submit this form?');">
    <input type="submit" name="completeYes" value="Complete Transaction" />
</form>

form confirm before submit

sample fiddle: http://jsfiddle.net/z68VD/

html:

<form id="uguu" action="http://google.ca">
    <input type="submit" value="text 1" />
</form>

jquery:

$("#uguu").submit(function() {
    if ($("input[type='submit']").val() == "text 1") {
        alert("Please confirm if everything is correct");
        $("input[type='submit']").val("text 2");
        return false;
    }
});

Confirmation before submitting form using jQuery

You are submitting the form and after are checking for confirm, you need to the inverse

JS:

$(function() {
   $("#delete_button").click(function(){
      if (confirm("Click OK to continue?")){
         $('form#delete').submit();
      }
   });
});

HTML:

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
    <input id="delete_button" class="floatright" type="button" value="Delete" />
</form>

confirm dialog before form submit on click

I think you should use javascript default confirm()

HTML PART

<a href="{{ route('delete-hotel', $hotel->slug) }}" class="btn btn-operation btn-danger" onclick="return confirmation();"> 

SCRIPT

function confirmation(){
    if(confirm('are you sure?')){
        document.getElementById('delete-form').submit();
    }else{
        return false;
    }   
}

Hope it will help you.

UPDATE

May be you are redirecting to href url before form submit. So make your link

<a href="javascript:void(0)" class="btn btn-operation btn-danger" onclick="return confirmation();">

How to display a confirm box before submitting a form using jquery confirm?

You could use a "flag" to know if the confirmation occured or not to "prevent default" submit behavior.

Remove the inline onsubmit = "ValidateMyform(this);" and use a jQuery event handler instead.

var confirmed = false;
$("#ReceptionForm").on("submit", function(e){

  // if confirm == true here
  // And if the form is valid...

  // the event won't be prevented and the confirm won't show.
  if(!confirmed && ValidateMyform($(this)[0]) ){
    e.preventDefault();

    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure?',
      buttons: {
        No: function () {
          return;
        },
        Yes: function () {
          confirmed = true;
          $("#ReceptionForm").submit();
        }
      }
    });
  }
});

---

Related Topics