From time immemorial, HTML forms can send an HTTP request declaratively, while submitting forms and awaiting response. However, you have to wait for a full page reload before getting your results, which most times is not the best user experience. Forms can also prepare an HTTP request to send via JavaScript, which is of better user experience. This article explores ways to do that using three different frameworks namely Vue, React and Hyperapp.
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. To learn more about Vue, you can visit the official homepage here
First, let’s define our HTML structure. Create a file named vue.html
https://gist.github.com/d9a57ff44c1d5fbd823f9c075c5b4439
The code snippet above is a basic HTML declaration in which we:
- Required the Bootstrap CSS library
- Required the Vue JavaScript library
- Required the Axios JavaScript library, this library would make
POSTrequests. - Declared 5 elements which comprise 3 input text boxes, one text area, and one button, which would be used to submit the form.
You would notice that in each of the 5 elements, the first 4 declares a v-model attribute to some certain properties of form.
V-model is a way of binding inputs to Vue, such that Vue has the values of these input as they change.
Form does not refer to the HTML form, but refers to an object which we have used for the binding in our Vue component.
Last, if you look at the button element, you would notice a little directive called @click. This directive binds the click event of the button to Vue, instructing Vue on what to do when the button is clicked.
Implementing Vue into the form
In the previous section, we have explained the reason you have seen attributes like v-model in your HTML structure and the @click directive. Here, we show what the Vue part that handles the rest looks like.
Open a script file in your HTML document and paste in:
https://gist.github.com/c72eee79d380d1fd24c67eed026ddece
In the code block above, we defined an Object called form, which comprises our data. Next, we defined a method called submitForm which does an Ajax request to https://httpbin.org/anything. We use httpbin because their service allows us to perform free HTTP methods. The /anything route would return the exact data which we had sent to it.
See how easy it is to submit a form using JavaScript? all you need do is change the URL to that of your server.
Why is my Form is not submitting? Often we note that after writing what looks like the right piece of code, the form does not submit. How do we troubleshoot this? Let me highlight common reasons your Vue form might not submit.
- The mounted element with the id of
apppassed into the Vue object with theelkey does not exist, and the app is not bound to Vue - The click handler on the submit button does not exist/was not attached
- The axios library was not referenced
- The Vue library was not referenced
React is a JavaScript library for building user interfaces developed and maintained by Facebook. React makes it painless to create interactive UIs. Design simple views for each state in your application and React will efficiently update and render just the right components when your data changes.
First, let’s define our HTML structure. Create a file named react.html and add:
https://gist.github.com/00ecc49014e6e9ed64a79146aa83f921
The code snippet above is a basic HTML declaration in which we:
- Required the Bootstrap CSS library
- Required the React JavaScript library
- Required the React-Dom JavaScript library
- Required the Axios JavaScript library, this library would make
POSTrequests. - Declared a div with the id of
app, which would be our root component
Implementing React into the mix
We have a basic setup with the required libraries available and a root element which react would be attached to. Let’s go ahead with the react implementation. Open a script tag and input:
https://gist.github.com/e15b03534c6a6df3dce66d3a5c859aa3
Let’s take a review of what we have above. Here, in our constructor, we declared an initial state that comprises our form object, we then moved ahead to bind two functions which we will set the state as the input changes and submit the form.
In the _onInputChange function, we receive two arguments, which are:
- name: the name of the element
- event: the change event that occurred
We use this two parameters to set the state of the exact input that was changed.
In the _onSubmit function, we fire a post request to the https://httpbin.org/anything endpoint, which returns the exact parameters sent. Here, which is what we use as our server.
Let us take a critical look at the render function, where the elements are being rendered.
Here, we defined 5 elements, which comprise 3 inputs, a text area whose change events are bound to the _onInputChange function, and a button element, whose click event is bound to the _onSubmit method.
Finally, we attached the app to an element on our HTML markup.
Why is my Form not displaying? I can bet you have been getting a blank screen, and cannot understand where the error is coming from.
Taking a quick look at the render function, you would notice we have jsx syntax in there. Now, here is the catch. Unless you are using babel to compile your app, jsx would most likely fail. This is because jsx isn’t regular javascript syntax, and here, we are using the browser build of React.
So how do we solve this? It’s a simple fix.
Any JSX block can be converted into a call to React.createElement with three arguments:
- The element to create, e.g
div,span,ul, e.t.c. - A properties object which specifies any property values to be set on that element e.g
class,style,required, e.t.c. - Any child elements to place in it. This could be a string or other calls to
React.createElementto get more elements.
Replace the render function with this:
https://gist.github.com/5c58060cff15c59dc69348447faf29c7
Also, update the ReactDom.render call to this:
https://gist.github.com/e62c83550588cdc5f40b3d55d9530f74
Why is my form not submitting? Even after performing each step we think is necessary and cross-checking our code, it is possible your form does not still submit, how do we trouble-shoot this?
- Ensure that your console is not throwing up errors
- Ensure that the click and change events are bounded correctly
- Cross check that the
axioslibrary or the library you use for post requests is referenced.
HyperApp is a JavaScript micro-framework for building web applications. This framework has aggressively minimized the concepts you need to understand to be productive while remaining on par with what other frameworks can do.
HyperApp holds firm on the functional programming front when managing your state, but takes a pragmatic approach to allowing for side effects, asynchronous actions, and DOM manipulations.
First, let’s define our HTML structure. Create a file named hyper.html and add:
https://gist.github.com/ec3c7203a4ee79702a8825d62377ab1c
The code snippet above is a basic HTML declaration in which we:
- Required the Bootstrap CSS library
- Required the Hyperapp JavaScript library
- Required the Axios JavaScript library, this library would make
POSTrequests. - Declared a div with the id of
app, which would be our root component
Introducing Hyperapp to the app We have a basic setup with the required libraries available and a root element which HyperApp would be attached to. Let’s go ahead with the react implementation. Open a script tag and input:
https://gist.github.com/7885be5c193e8ae4e069c04dbcf6abd2
Let’s take a review of what we have above. Here, we declared an initial state that comprises our form object, we then moved ahead to declare two actions which we will set the state as the input changes and submit the form.
In the onInputChange function, we receive one argument, which is:
- event: the change event that occurred
We use this two parameters to set the state of the exact input that was changed.
In the _onSubmit function, we fire a post request to the https://httpbin.org/anything endpoint, which returns the exact parameters sent. Here, which is what we use as our server.
Here, we must have seen the similarities between React and Hyperapp. In my own terms, I’ll describe Hyperapp as a lightweight alternative to React.
In the render function of the code above, we would notice the exact similarities to React. In fact, the only differences you would notice is the use of class instead of React’s className and onInput in place of onChange.
For the same reason we did not use
jsxin the React form, is the same reason we have not usedjsxhere. If you use thenpmpackage and prefer to usejsx, please feel free.
In this tutorial, we have seen how easy it is to submit forms using 3 different JavaScript frameworks. We have also seen how to solve common issues when our forms are not displaying or not submitting as intended. Do you have any observations about this tutorials or views you want to share? Let us know in the comments.