HTML.form.guide

How to Handle a Form without an Action or Method Attribute

html5 form action method

It’s not uncommon to come across form code that doesn’t have an action or method attribute visible in the HTML. Here’s an example:

<form id="subscription">
...
<button type="submit" >Submit</button>
</form>

Surprisingly, the form can still be submitted, and you will receive a message to that effect. So, how does this work?

Handling forms using JavaScript

The trick is to use JavaScript to capture the form submission event. The JavaScript code collects the form data and sends it to the server, displaying an appropriate message to the user.

Here’s some sample code to show you how it’s done:

<form id="subscription">
  <div>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  </div>
  <div>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  </div>
  <button type="submit">Submit</button>
</form>

<script>
  // Get the form element
  const form = document.getElementById("subscription");

  // Add an event listener for the form submit event
  form.addEventListener("submit", function(event) {
    // First, prevent the default form submission behavior
    event.preventDefault();

    // Collect the form data
    const formData = new FormData(form);

    // Send the form data to the server using a POST request
    fetch("https://example.com/submit-form", {
      method: "POST",
      body: formData
    })
    .then(response => response.text())
    .then(data => {
      console.log("Form submission successful:", data);
      // Display a success message to the user
      alert("Form submitted successfully!");
    })
    .catch(error => {
      console.error("Form submission failed:", error);
      // Display an error message to the user
      alert("Form submission failed!");
    });
  });
</script>

In this example code, we first get the form element using its ID, and then add an event listener for the submit event. Note that a unique ID is assigned to the form in the HTML code. Inside the event listener function, we prevent the default form submission behavior using the preventDefault() method. We then collect the form data using the FormData constructor, which automatically captures all the form fields and their values.

Next, we use the fetch function to send the form data to a URL specified in the fetch function’s first argument. In this example, we are using the HTTP POST method to send the form data to the URL. We pass the form data as the body option to the fetch function.

Once the form data is successfully submitted to the server, we display a success message to the user using the alert function. If the form submission fails for any reason, we display an error message to the user.

Using JavaScript to handle form submissions has many benefits. You can handle different cases dynamically. For example, you can validate the form data and show error messages, hide the form and show a progress message instead. This is why many web developers prefer to handle forms entirely using JavaScript.

Pro Tip: Connect your form to form back-end using just one line of code.

You can quickly connect any form to a back-end service like Ratufa by adding just one line of <script > code.
Form back-end service like Ratufa makes it possible to collect form submissions, send notifications and auto-reply by adding a simple connector script to the page.

Here are the steps:

  • Go to Ratufa and press the connect my form button. It shows a line of code that has to be added to your form page.
  • Update your page with the code and test submit the form. You can now see the form submission data at Ratufa.io . You can even configure email notifications whenever the form is submitted.

See Also

Categories