Article: Understanding the JavaScript Form Submission

A Web Developer will often use a JavaScript function for a JavaScript form submission when he or she wants to change the content type to JSON to send server-side via a HTTP request.

• By Mensah Alkebu-Lan
• 21 August 2022

Table of Contents

• Introduction
• Let’s Look at Some Code
• References

Introduction

From the time a person in this country becomes a young adult, he will often find himself in a situation when he is filling out an HTML form. It could be something as simple and mundane as signing up to use his or her favorite social media app.

With that being said, there are many use cases in Web Development where a Web Application will have to handle the behavior of a form submission, and there are a number of ways to submit a form. It may be possible to handle form submissions with the action attribute of the <form /> element, or the developer may choose to use a javascript function instead. Of course, a developer can also do both.

To use the action attribute of the form element, the form would look something like the following:

<form action=”...” method=”post”> … </form>

In the above example, the content type is application/x-www-form-urlencoded. This content type is generally handled by a PHP file. The URL of this PHP file would be the value of the action attribute.

On the other hand, a web developer will often use a JavaScript function when he or she wants to change the content type to JSON to send server-side via a HTTP request. This javascript function can be called from specific attributes on or within the form, or the submit event can be used as a parameter in an addEventListener method. We generally call this JavaScript function an event handler. An event handler takes an event object as one of its parameters.

Let’s Look at Some Code

A fairly simple example of an HTML form would be the following:

<form id=”myform” class="pt-4">
   <div class="input-group position-relative">
<input type="text" name=”subscriber_name” class="form-control bg-white rounded-left"
              placeholder="Enter your name">
       <input type="email" name=”subscriber_email” class="form-control bg-white rounded-left"
              placeholder="Enter your email address">
       <button type="submit" class="btn btn-secondary bg-hover-primary border-hover-primary">
           Subscribe
       </button>
   </div>
</form>

Above, is the HTML code of a common subscription form. Among other things, this HTML form contains two <input /> elements representing text fields. One <input /> element capture’s the user’s name and the other captures the user’s email. And there’s a submit button to process the data after the user is finished entering it into the form.

The developer may also use a <input type=”submit” value=”submit” /> instead of the <button /> element. The button element is generally used when the developer intends to do additional styling of the button.

An example of an event handler handling the submit event of the above HTML form would be the following:

<script>
function logFormSubmit(event){
console.log(`Form submitted! Timestamp: ${event.timestamp}`);
event.preventDefault();
}

const form = document.getElementById('myform');
form.addEventListener(‘submit’, logFormSubmit);
</script>

References

1. “Forms – React.” React, https://reactjs.org/docs/forms.html. Accessed 21 August 2022.

2. “onsubmit Event.” W3Schools, https://www.w3schools.com/jsref/event_onsubmit.asp. Accessed 21 August 2022.

3. “HTMLFormElement: submit event - Web APIs | MDN.” MDN Web Docs, 9 July 2022, https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\_event. Accessed 21 August 2022.

4. “Sending form data - Learn web development | MDN.” MDN Web Docs, 15 August 2022, https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending\_and\_retrieving\_form\_data. Accessed 21 August 2022.