Confirm before a form submit

Question

I have searched for an answer but couldn't find one!

I have a simple form,

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

How would I adjust this to confirm before processing the form?

I tried onclick, but couldn't get it working.

Any ideas?

UPDATE - What I now have.

<script type="text/javascript">
var el = document.getElementById('myCoolForm');

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

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

You have to add the listener **after** the form is in the document. Use window.onload to add it, or put the script after the form in the page. — RobG, Jun 27 '11 at 13:26
Wasn't aware it had to come afterwards, but it makes sense. Thanks RobG. — sark9012, Jun 27 '11 at 14:47
[javascript form submit](https://stackoverflow.com/q/6515502/6521116) — LF00, Jun 01 '17 at 04:36
Does this answer your question? [JavaScript Form Submit - Confirm or Cancel Submission Dialog Box](https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box) — Flimm, Nov 11 '21 at 09:30

Michael J.V. · Accepted Answer · 2011-06-27T13:10:06.677

53

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>

edited Jun 27 '11 at 13:10

answered Jun 27 '11 at 12:49

Michael J.V.

5,499
1
20
16

Nothing is happening when I click the button? Just going to the adminprocess.php page! – sark9012 Jun 27 '11 at 12:54
Did you use markup I provided? Your HTML doesn't contain the id element I added to the form so I can grab it via `getElementById` method. – Michael J.V. Jun 27 '11 at 12:56
I copy and pasted the code and it's just bypassing the confirmation attempt. I'll update the question with what I now have. – sark9012 Jun 27 '11 at 12:58
4

When I tried this if press "cancel" it still submits the form. Shouldn't it prevent the form from submitting too? – croc_hunter Nov 13 '17 at 22:28
you must change the onsubmit into onclick – Ask Warvin Jul 14 '22 at 07:51
add event.preventDefault(); – Godstime John Apr 21 '23 at 02:14

Greenisha · Answer 2 · 2011-06-28T04:04:23.287

19

<input type="submit" onclick="return confirm('Are you sure you want to do that?');">

edited Jun 28 '11 at 04:04

answered Jun 27 '11 at 12:46

Greenisha

1,417
10
14

@RobG you're mistaking a bit. This `

` works perfectly – Greenisha Jun 27 '11 at 13:51

score 2 · Answer 3 · answered Jun 27 '11 at 12:46

2

The correct event is onSubmit() and it should be attached to the form. Although I think it's possible to use onClick, but onSubmit is the correct one.

answered Jun 27 '11 at 12:46

Maxim Krizhanovsky

26,265
5
59
89

1

There is not onsubmit event. There is an HTML attribute is named *onsubmit*, but the related event is the [submit](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) event. – RobG Jun 27 '11 at 13:31
ok, this is about semantics, as onclick is not event as well, but I agree with you, as you are indicating the correct terms – Maxim Krizhanovsky Jun 27 '11 at 13:44

score 1 · Answer 4 · answered Jun 27 '11 at 12:49

1

If you're already using jQuery.. you can use an event handler to trigger before submission

$(document).ready(function() {
   $("#formID").submit(function(){
      // handle submission
   });
});

Reference: http://api.jquery.com/submit/

answered Jun 27 '11 at 12:49

Atticus

6,585
10
35
57

Not using jQuery, but thankyou for the suggestion. Definitely something I need to learn more about. – sark9012 Jun 27 '11 at 12:50
I would strongly suggest using jQuery if you are going to be developing with javascript. It provides a platform on which many functions you may have to create yourself, are already created. And its very extendable. – Atticus Jun 27 '11 at 12:51
Any suggestions on the best place to get to grips with it? Quite simply the jQuery website? – sark9012 Jun 27 '11 at 12:52

antelove · Answer 5 · 2018-02-18T04:49:30.773

var submit = document.querySelector("input[type=submit]");
  
/* set onclick on submit input */   
submit.setAttribute("onclick", "return test()");

//submit.addEventListener("click", test);

function test() {

  if (confirm('Are you sure you want to submit this form?')) {         
    return true;         
  } else {
    return false;
  }

}

<form action="admin.php" method="POST">
  <input type="submit" value="Submit" />
</form>

score 0 · Answer 6 · answered Sep 11 '19 at 21:11

In my case, I didn't have a form ID and couldn't add inline in the form tag. I ended up with the following jQuery code

    var form = $("form").first();
    form.on('submit', function() {
        return confirm('Are you sure you want to submit this form?');
    });

Godstime John · Answer 7 · 2023-04-21T09:10:19.153

0

document.getElementById("myCoolForm").addEventListener('submit', function(event){
            event.preventDefault();
           
            var message = "Are you sure you want to perform this action?";
            
             if (confirm(message)) {
                    document.getElementById('myCoolForm').submit();
                    return true;
             }
             return false;
        });

edited Apr 21 '23 at 09:10

answered Apr 21 '23 at 02:18

Godstime John

253
3
8

score -2 · Answer 8 · edited Apr 17 '14 at 07:45

-2

if you have more then one submit buttons that do different actions you can do it this way.

<input TYPE=SUBMIT NAME="submitDelete"  VALUE="Delete Script" onclick='return window.confirm("Are you sure you want to delete this?");'>

edited Apr 17 '14 at 07:45

Rahil Wazir

10,007
11
42
64

answered Jul 19 '13 at 17:55

Dextr

9

Confirm before a form submit

8 Answers8

Linked

Related