Blocking Text Field Form Submission

A form with only one text field and the cursor in that field will submit when the Enter/Return key is tapped, even when the form has no submit button.

That's the way it used to be.

Yesterday, I found out that a form may submit even when the form has more than one text field. A client found the "bug".

I fixed it by telling the form not to submit unless it is done with JavaScript. That worked.

Here is an example. The form will not submit when Enter/Return is tapped within the text field. It will submit only when the button is tapped. Note: The form submits to example.com in a new browser tab.

Here is how it was done.

1. Put an id value and onsubmit="return false" attribute into the form tag. Here is an example:

   <form id="MyForm" onsubmit="return false" method="post" action="https://example.com/page.php">
   

   The id="MyForm" id value will be used in the next step.

   The onsubmit="return false" attribute prevents the user from submitting the form with HTML methods. It can only submit with JavaScript.

2. Changed the submit button into type="button" and added an onclick=… attribute. Here is an example:

   <input type="button" onclick="document.getElementById('MyForm').submit()" value="Pay Now">
   

   The type="button" attribute will react only with JavaScript.

   The onclick="document.getElementById('MyForm').submit()" attribute submits the form when the button is tapped. The submission is accomplished by using the form field's id="MyForm" id value and the JavaScript submit() function.

The element with an onclick=… attribute doesn't have to be a button. It could be an image or anything else that is clickable, within or outside the form area.

The above steps will prevent a form from submitting except when a button with an onclick=… attribute is tapped.

(This content first appeared in Possibilities newsletter.)

Will Bontrager