JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

Question

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>

Peag

Answer 1

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

Punchdrunk

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. – Counteract

Somehow, even I select cancel, the submit proceed (Chrome 86) – Taliped

@Taliped you probably missed a return statement then. – Punchdrunk

@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> – Taliped

Answer 2

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}

Passageway

Answer 3

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/

Lor

onsubmit="return confirm('Is the form filled out correctly?');" would be much simpler, and the result would be the same. – Shaughn

Answer 4

Simple and easy :

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

Firebrand

Answer 5

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>

Niggling

Answer 6

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

Sochi