247

For a simple form with an alert that asks if fields were filled out correctly, I need a function that does this:

  • Shows an alert box when button is clicked with two options:

    • If "OK" is clicked, the form is submitted
    • If cancel is clicked, the alert box closes and the form can be adjusted and resubmitted

I think a JavaScript confirm would work but I can't seem to figure out how.

The code I have now is:

function show_alert() {
  alert("xxxxxx");
}
<form>
  <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

6 Answers 6

518

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);">
4
  • 7
    Just to clarify, validation on the client side (in JavaScript) should only be considered to be for the user's convenience. JavaScript code is freely editable by the user, and should not be trusted. The real validation should always be done in the back end to avoid malformed or malicious data reaching your database or server. Sep 7, 2020 at 22:21
  • 3
    Somehow, even I select cancel, the submit proceed (Chrome 86)
    – Muflix
    Nov 13, 2020 at 8:00
  • 1
    @Muflix you probably missed a return statement then.
    – Samuel Liew
    Nov 13, 2020 at 8:02
  • 6
    @SamuelLiew I double checked it, and realized that it does not work because of data-ajax=true attribute in asp.net core. So I implement the check on submit button instead <button type="submit" onclick="return confirm('Are you sure?')">Submit</button>
    – Muflix
    Nov 13, 2020 at 8:09
35

You could use the JS confirm function.

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/

1
  • 33
    onsubmit="return confirm('Is the form filled out correctly?');" would be much simpler, and the result would be the same.
    – Sk8erPeter
    Sep 10, 2012 at 19:29
34
function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}
0
20

Simple and easy :

<form onSubmit="return confirm('Do you want to submit?') ">
  <input type="submit" />
</form>

3

OK, just change your code to something like this:

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

Also this is the code in run, just I make it easier to see how it works, just run the code below to see the result:

function submitForm() {
  return confirm('Do you really want to submit the form?');
}
<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

0

If you want to apply some condition on form submit then you can use this method

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

One thing always keep in mind that method and action attribute write after onsubmit attributes

javascript code

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.