HTML.form.guide

How to use HTML form action with JavaScript

html form action html form action javascript

HTML forms allow users to enter and submit data on a webpage. When a user clicks on the submit button, the form data is sent to the server using an HTTP request. The action attribute of the HTML form specifies the URL where the form data should be sent.

However, sometimes you might want to perform additional actions with the form data before sending it to the server, such as validating the input or processing it with JavaScript. In such cases, you can use JavaScript to handle the form submission instead of relying on the default behavior.

Step 1: Lets Build the HTML form

HTML Form code:

<h2>Feedback</h2>
<div class="p-4">
<form id="myform">
  <div class="form-group">
    <label for="myform_name">Name</label>
    <input type="text" name="name" class="form-control" id="myform_name" placeholder="Your Name">
  </div>
  <div class="form-group">
    <label for="myform_email">Email address:</label>
    <input type="email" name="email" class="form-control" id="myform_email"  placeholder="Your email">
  </div>
  <div class="form-group">
    <label for="myform_message">Message</label>
    <textarea class="form-control" name="message" id="myform_message" rows="3"></textarea>
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

Step 2: The event handler for form submission

Javascript code that handles the form submission event

function submitForm(e) {
  e.preventDefault();
 
 var myform =    document.getElementById("myform");
  
  var formData = new FormData(myform);

  fetch("https://show.ratufa.io/json", {
    method: "POST",
    body: formData,
  })
    .then(response => {
    if (!response.ok) {
      throw new Error('network returns error');
    }
    return response.json();
  })
    .then((resp) => {
      let respdiv = document.createElement("pre");
      respdiv.innerHTML = JSON.stringify(resp, null, 2);
      myform.replaceWith(respdiv);
      console.log("resp from server ", resp);
    })
    .catch((error) => {
      // Handle error
      console.log("error ", error);
    });
}

Step 3: Wire the event handler to the form

var myform = document.getElementById("myform");

myform.addEventListener("submit", submitForm);

Full Demo

Try the full demo here:

See the Pen Submit form using Javascript (using fetch api)) on CodePen.

How to create the server-side script that receives the form submissions

Even though you have completed your form with a button to submit the form, you still need a server-side script that will receive the form submission and perhaps sends you an email and saves the form data to a database for record keeping.

You can find such a script here. The script is written in PHP. So you should be comfortable editing PHP script to be able to use the script.

That’s a catch! You need a server and a script running on the server to handle form submissions. However, there is an easier solution. Use Ratufa form back-end.

Pro Tip: Attach a form handler with just one line of code

Ratufa is a form back-end as service. You just have to add one line of code to your form page and the form immediately becomes fully functional.

See a quick demo here:

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