JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

JavascriptHtmlFormsSubmitConfirm

Javascript Problem Overview


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>

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

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/

Solution 4 - Javascript

Simple and easy :

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

Solution 5 - Javascript

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>

Solution 6 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmattView Question on Stackoverflow
Solution 1 - JavascriptSamuel LiewView Answer on Stackoverflow
Solution 2 - JavascriptMajid FouladpourView Answer on Stackoverflow
Solution 3 - JavascriptJason GennaroView Answer on Stackoverflow
Solution 4 - JavascriptPablo SalazarView Answer on Stackoverflow
Solution 5 - JavascriptAlirezaView Answer on Stackoverflow
Solution 6 - JavascriptSumit Kumar GuptaView Answer on Stackoverflow