We help IT Professionals succeed at work.

How to Cancel Submitting an HTML Form

FlorisMK
FlorisMK asked
on
I have:

A page with an HTML form. A submit button on the form. A javascript function called from the onsubmit event that validates form entries.

For browsers dat do not support scripting, the button needs to be a submit button (otherwise, they would have no way to send the form).

For browsers that do support script, the form is submitted after validating that all fields were entered correctly.

If not, submitting the form must be canceled.

How do I cancel submitting a form without refreshing my page?


<html>
<head>
<script language=javascript>
<!--
function submitForm()
   {
   // If anything is wrong in the form, it needs to be
   // NOT submitted, so there must be code to CANCEL
   // submitting a form!!
   }
//-->
</script>
</head>
<body>
<form action="some-action.cgi" method=post onsubmit="submitForm()">
<input type=text name="userEntry">
<input type=submit value=submit>
</form>
</body>
Comment
Watch Question

Commented:
Have you tried adding the code instead to your submit button like this:

<input type=submit value=submit onclick="javascript:submitForm();">

You let the submitForm() return true to continue or false so that it will not continue submitting the form. Try this if this works.
Commented:
<html>
<head>
<script language=javascript>
<!--
function submitForm()
  {
  // If anything is wrong in the form, it needs to be
  // NOT submitted, so there must be code to CANCEL
  // submitting a form!!

  // If all OK you need to return true
  // return true;

  // otherwise return false
  return false;
  }
//-->
</script>
</head>
<body>
<form action="some-action.cgi" method="post" onsubmit="return submitForm();">
<!-- check the return value onsubmit-->
<input type=text name="userEntry">
<input type=submit value=submit>
</form>
</body>

<!-- for good practice include a closing html tag ;) -->
</html>

HTH,

Mal
CERTIFIED EXPERT
Top Expert 2005

Commented:
I have found the best way to do this is not to use a submit button, but instead a regular button with the onClick="JavaScript:SubmitForm()"

Then

function SubmitForm
{
if(conditions are not met)
    {
     return focus to the offending field like--
     doucment.formname.controlname.focus()
     return false;
    }
else
    {
    document.forname.submit()
    }


If you use a submit button rather than a regular button, the form often times submits even when you don't want it to.

Commented:
malcx version is the best and most common way. Since you are using the events supplied by the browser itself. returning false in the onsubmit event works great. Except perhaps when there is an error in the javascript, then it will return true anyway and submit the form.


Regards,
CJ

Commented:
Thanks CJ -
>>Except perhaps when there is an error in
>>the javascript
Errors!, what're they? ;-)

Mal

Author

Commented:
Yep, malcx - your solution works, which is good, but also has the form functioning if the browser does not support javascript, which is even better!

fritz_the_blank: works, but if there is no support for scripting, there is no submit button, so the form will NEVER be submitted...
CERTIFIED EXPERT
Top Expert 2005

Commented:
Ah, I hadn't thought of that!! Of course, if there is no scripting, then the user can submit non-validated information? (BTW, how can that be? If there is no scripting, then how can the JavaScript return a true to the form action JavaScript Call?)I wonder which is worse: not submitting the form at all or submitting non-validated data? Nonetheless, I am happy to learn about: onsubmit="return submitForm()

Fritz the Blank

Explore More ContentExplore courses, solutions, and other research materials related to this topic.