Form with no action and where enter does not reload page

Strategies to prevent form action

When the goal is to retain the form data on-screen and suppress the default form submission, we can use a variety of techniques in tandem with the above inline JavaScript.

Replacing action attribute

While leaving out an action attribute or using action="javascript:void(0);" may serve to prevent a page reload, it might raise questions around best practices and standards.

JavaScript capture of Enter keypress

A keypress event listener can be added to the form fields to intercept the Enter keystroke and prevent a page reload:

document.getElementById('myForm').addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault(); /* This will stop you right in your tracks! */
  }
});


Fine-tuning button types

Consider replacing the submit button with a button tag to control its behavior:

<button type="button" onclick="handleForm()">Submit</button>


With this modification, the form will not submit unless your defined JavaScript function is activated, transferring form submission control to you as the developer.

Submission via JavaScript

Should you need to submit form data without refreshing the page, use AJAX or similar techniques for asynchronous client-side data transmission:

function handleForm() {
  var xhr = new XMLHttpRequest();
  /* Alien technology incoming! Submitting form without refresh! */
  // Configure and send the request
}


User experience enhancements

With jQuery, enhancing event handling and user experience becomes a simpler task. For instance, the following jQuery snippet can focus the cursor on the first input field:

$('form input:first').focus(); /* And the award for best lead role goes to... */


Ensuring cross-browser compatibility

Different browsers might interpret certain methods of event handling and form submission in their own ways. The examples provided, however, including preventDefault() and explicit button types, maintain general cross-browser compatibility.

Incorporating fallbacks

Incorporate fallbacks, such as return false;, to handle legacy browsers or unexpected behaviors as follows:

<form onsubmit="return false;">


This acts as a secondary safeguard, instructing the browser to cease any action when a form is submitted.

Load server data dynamically

Utilising AJAX or jQuery's load() method allows fetching of fresh data from the server without necessitating a page reload:

$('#result').load('/server/data'); /* Fresh data, served on the spot without refreshing! */


Driving accessibility

Ensure that the form is accessible to all users, including those who navigate without a mouse:

<input type="text" onkeypress="if(event.key === 'Enter') yourFunction();" />


By attaching accessible handlers, your form submission can be handled via keyboard, adhering to accessiblity standards.