Published: Modified: V1.25
js

Basic javaScript form examples including simple full stack code

So then when it comes to javaScript form examples there is just getting started with input elements, and forms on the client side for starers. This is simple enough, but in order to have a truly functioning form one will have to get into working out server code for some kind of back end system. This back end system can start out with something that is very simple, but when it comes to making a real project things can get very time consuming especially if one is making everything from the ground up.

Depending on what it is that you want or need to do with a javaScript form and input elements a back end system may not be needed at all, however a typical use case of forms is to involve some kind of back end system. Still that might not always be the case, so in this post I will be going over some simple examples that just have to do with the basics of working with form elements and javaScript in a client side javaScript environment. In addition I might get around to at least one example that make use of a nodejs back end system.

1 - Basic javaScript form examples

To get started with javaScript forms it might be best to know a thing or two about input tags, which are used to make fields for a form. There is a great deal to cover just with them when it comes to the various types of input tags, as well as how to get the current value of an input tag when attaching events for them, and so forth. So then there may be a number of other posts that you might want to start off with if you are still very new to javaScript, such as how to get a reference to an element by way of a method like document.querySelector. It might also be a good idea to read up more on event listeners and the event objects that there are to work with inside such handers for various kinds of events.

In this section I will just be going over the basics and more when it comes to input tags, which is a major part of getting started with javaScript forms. Later in this post I will be getting into some far more complex examples that involve the use of some back end code when it comes to making forms that interact with some kind of server. I will be keeping these examples fairly simple, but this is still not a getting started with javaScript type post.

- The source code examples here are on Github

The source code examples in this post can be found in my test vjs repository. There is also where I have all the source code examples for my many other posts on general javaScript topics.

1.1 - Basic example of a button type input element

Here I have a basic example of an input element with the type attribute set to button. For this example I am just using the click event to step a value stored in the input tag by way of the dataset property of the element. So then there is creating an input element, assigning an id for it, making sure that the type of the input element is set to button, and the setting an initial value for a count property in the data attribute for the element. There is then also the value attribute of the element that is of importance when making a button, and many other input elements. For buttons the value attribute will be the display name for the button. For this example I am using a draw function to set the value of the input element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
    <head>
        <title>javaScript form input example</title>
    </head>
    <body>
        <input id="button_1" type="button" data-c="0" value=""><br><br>
        <div id="out"></div>
        <script>
// ref to the button
var b = document.getElementById('button_1');
// update the value of the button
var draw = function(){
    b.value = 'click me (' + b.dataset.c + ')';
};
//
b.addEventListener('click', function(e){
    var d = e.target.dataset,
    c = parseInt(d.c);
    c += 1;
    d.c = c;
    draw();
});
// call draw for the first time
draw();
        </script>
    </body>
</html>

1.2 - Text type input element

Another type of input element typically used for forms would be the text type input element. This is one way of creating a way to allow a user to input some text, but with input elements of type text it is more for the sake of inputing data for a field of data, and not so much a large body of text. In the event that I want to have an element that will be a a large body of text it is generally better to go with a text area element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <title>javaScript form input example</title>
    </head>
    <body>
        <input id="seed" type="text" value="1234"><br><br>
        <div id="out"></div>
        <script>
var draw = function(text){
    document.getElementById('out').innerText = text;
};
var input = document.getElementById('seed');
input.addEventListener('keyup', function(e){
    draw(e.target.value);
});
draw(input.value);
        </script>
    </body>
</html>

2 - Node sever script javaScript form example with query string and get requests

In order to really get into what javaScript forms are for I need to have at least one or two examples in this post that involve some back end javaScript code. So with that said in this section I will be going over a very basic example of using a javaScript from to navigate to a search path with some query strings that are set with a form.

2.1 - The query-string.html file

Here I have an html file with just a form element and a single text input element in it, and a submit button. I am setting the action attribute of the form element to the search path and the method to get. This way when the submit button is clicked the user will be directed to the search path with the query string set to the values given in the text input field.

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>javaScript form input example</title>
    </head>
    <body>
        <form action="/search" method="GET">
            <input name="q" type="text" value="javaScript form"><br><br>
            <button type="submit">Search</button>
        </form>
    </body>
</html>

2.1 - The server.js file

Now for the server file for this javaScript form example. I am using the http module to create a simple server that will just respond to get requests for severing up the client system that is just the single html file, and then any kind of query to the search path. The file system module is used to read the contents of the query string html file with the form element, and send it to the client when the root path is reached, and I am also using the path module, and url module for parsing paths and query strings.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let http = require('http'),
path = require('path'),
fs = require('fs'),
url = require('url'),
port = process.env.port || process.argv[2] || 8080;
 
let server = http.createServer();
 
let getHandler = function (req, res) {
 
    return new Promise((resolve, reject) => {
        if (req.method === 'GET') {
            if (req.url === '/') {
                res.writeHead(200, {
                    'Content-Type': 'text/html'
                });
                fs.createReadStream(path.join(__dirname, 'query-string.html')).pipe(res, function () {
                    resolve();
                });
            } else {
                let qs = url.parse(req.url, true).query;
                res.writeHead(200, {
                    'Content-Type': 'text/plain'
                });
                res.write('query for: ' + qs.q);
                resolve();
            }
        } else {
            reject(new Error('not a get request'));
        }
    });
};
 
server.on('request', function (req, res) {
    getHandler(req, res)
    .catch((e) => {
        res.writeHead(501, {
            'Content-Type': 'text/plain'
        });
        res.write(e.message);
        res.end();
    })
    .then(() => {
        res.end();
    });
});
 
server.listen(port, () => {
    console.log('web server is up on port: ' + port);
});

So then when this example is up and ruining it is serving up the single html file at the root path, and the search path which at this time is just displaying the query in the browser window. Nothing major at this point but the basic idea is all ready there and working it is now just a matter of what I do with that query in the back end system.

3 - Conclusion

of course it goes without saying that I have not even scratched the surface of what can be done with javaScript forms, and a little sever side javaScript. When it comes to making a real project there is a whole world more that needs to be covered when it comes to things like sever side sanitation and horizontal scaling just to name a few things that come to mind. Still when it comes to simple projects that are just going to be used off line then just some basic work with input elements and a little javaScript is enough to get things working at least. In this post I just wanted to cover the basics of javaScript forms, and that is about it.