Name: kennyW

How we Made

Our Subscription Page - Repeating the form Input

kennyW's picture
by Kenny Wood
18 November, 2015Comments
Have you clicked on the "subscribe" link on our blog posts page yet? No? Well, you really should. While you're there, why not pop your email address in as well?
Did you see what happened on the email composer beneath the input? Want to know how we created this simple replicating field? Well then read on.
Replicating input fields Javascript

What better way to kick off our 'How we Made' series, than with a tutorial on how we made part of the very blog we will be posting on? We thought we would start with a nice basic snippet that even a beginner developer could implement in minutes.

We're going to cover how we made the replicated text input on the subscribe page, as seen in the above animation. This is a great effect that can be replicated and used anywhere. It's a very useful technique and the good news is, there's really not much to it. Just a couple lines of basic javascript.

What's happening here is actually very simple. We are taking the users input from the text field, and outputting it to a div lower down on the page. So, now let's take a look at exactly how we do that.

First things first, the HTML. For this we just need an input field and a div to output the users input to.
We're going to use an input field with the type 'email' but it can be an input of any type; <input type="email" name="email" id="email"> <div id="outputEmail"></div>
Then we use this simple snippet of javascript, which will update the div with the value of the input field after each keystroke; <script> document.getElementById("email").onkeyup = function() { document.getElementById("outputEmail").innerHTML = this.value; } </script>

Now let's break down what's going on here;

The 'document.getElementById("email")' part is used to tell the browser which element we are looking at, which in this case is the 'email' input

Followed by 'onkeyup = function() {' which tells the browser that we want the following function to run after the user has finished pressing a key on the keyboard (it is important that this function runs AFTER the keystroke, otherwise there will be a delay of 1 character if the function runs during the keypress

Then, inside the function we get the following to run 'document.getElementById("outputEmail").innerHTML = this.value;' which will, as before, take an ID, in this case the 'outputEmail' div, and then update its contents (.innerHTML) with the value of the input field ('this.value')

And there we have it. As we promised, extremely simple and easy to do, even for a beginner developer.
We hope you enjoyed this tutorial. If you did, please drop us a comment and be sure to subscribe!

Other Posts

Free Christmas Graphic Templates

To celebrate the launch of our new blog, we are giving away a pack of 6 christmas graphic...

Welcome to Our New Blog

Now, we don't want to give too much away too soon, but we are working on some very exciting...