Forms…how do they work?

stop hand

In nearly every web application, you will build a form of some kind. There are a lot of moving parts with forms. So I thought I would spend a post discussing those parts…or at least parts of those parts.

Process

So how does this whole form process work? At its basic level, it works as follows…

  1. End user submits the form
  2. Form is received by the web server
  3. Submission is passed to the app server (.NET, Java, PHP, etc.)
  4. App processes the form (validation, database interactions, etc.)

Now, that is an extremely high-level explanation. There are a lot of pieces that need to be in place for a form to work properly. Let me address each of these over several posts. Let’s begin with the first one…the end user submitting the form.

In the ‘old days’, HTML forms were submitted directly to the web server. This is no longer the case. As web developers, what we typically do is capture the form submission. In other words, we do not allow the form submission to occur as it normally would under regular HTML. We want to control the submission process to ensure it is completed properly. Typically, this involves validation (which I will write a more detailed validation post at a later date). We want to make certain that our data is correct and we do not get

We want to make certain that our data is correct and we do not get ‘GIGO’, or Garbage In, Garbage Out. Data is the life-blood of an organization. So we want to ensure it is as clean as possible. This may be checking that the data is in the format required, that there is data in the form fields at all, etc.

So, nowadays, we grab the submission event and stop it. We then run the form data through several validation checks, give whatever feedback is necessary and submit the form on behalf of the end user.

There are several ways to stop the regular form submission process. Some of these depend on the framework that is being used. Allow me to offer just some examples of how a developer might do this…

// This example uses jQuery
$('#someForm').submit(function (evt) {
    // Prevent default stops the default behavior
    evt.preventDefault();
});
// This example is raw JS
element.addEventListener("submit", function(evt) {
    // Prevent default stops the default behavior
    evt.preventDefault();
}
// A return function statement can also be used
onsubmit="return someFunc()"

I, personally, prefer the first two methods of using preventDefault(). This separates the functionality from the content.

Happy Coding!

Clay Hess

More To Explore

computer, laptop, work place-2982270.jpg
Code

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

lighthouse, beacon, atlantic-8578318.jpg
Code

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.