Create a Digg-Style Live Character Update with JavaScript
If you have ever been to Digg’s submit page, after entering the URL, you will see some forms to fill out. These include a title and description, along with choosing a category for your submission. These are very common fields that you would expect to see on a submission page for an article, but what is great about Digg is that it shows you a live preview of your submission at the bottom of the page, and it updates as you change it around. Today I am going to show you how you can mimic this behavior with your own site using just simple JavaScript, and how it can really help improve your user’s experience!
If you would like to view a live example of this, I’ve got one hosted right here. Check it out and let me know what you think, and please do continue on with the tutorial!
The HTML Code
To begin we are starting out with some very basic skeleton code. This will include our HTML, head, title, and all of that other fun stuff that goes into an HTML document.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Live Character Update With JavaScript</title> </head> <body> </body> </html> |
As you can see this isn’t very exciting code, and there’s no reason it should be…yet. So let’s first add some of our forms. Right after the body tag, insert the code below:
1 2 3 4 5 6 7 8 9 10 11 12 | <label>Enter a Title:</label> <input type="text" name="title" id="title" onkeyup="javascript:updateTitle('title', 'headerContent');" onpaste="javascript:updateTitle('title', 'headerContent');" /> <br /><br /> <label>Enter Text:</label> <textarea id="textarea" onkeyup="javascript:updateText('textarea', 'typedContent');" onpaste="javascript:updateText('textarea', 'typedContent');"></textarea> <br /><br /> <label>Choose a Category</label> <input type="radio" name="cat" value="1" onclick="javascript:updateCat('catContent', 1);" />Apple <input type="radio" name="cat" value="2" onclick="javascript:updateCat('catContent', 2);" />Design <input type="radio" name="cat" value="3" onclick="javascript:updateCat('catContent', 3);" />Gadgets <input type="radio" name="cat" value="4" onclick="javascript:updateCat('catContent', 4);" />Hardware |
Although we don’t have a form surrounding all of that code, it is not necessary for what we are trying to accomplish here. What I have set up would be one textfield where the title goes, one textfield where a description goes, and then also a list of radio buttons to choose a category from. You may also notice that these have some javascript functions that execute when data is entered into the fields (or clicked, for the radio buttons). In the next section I’ll go over each function in detail, but first we need to add our area to the page that will be updated as we edit things (I like to call this the “update area”). So after all of that form stuff, go to a new line and enter this:
1 2 3 4 5 6 7 8 | <hr /> <h3>Live Preview Here!</h3> <h2 id="headerContent"></h2> <p id="typedContent"></p> <p id="catContent"></p> |
Each one of those elements will play an important role in our script, so let’s jump right into the JavaScript functions!
The JavaScript Stuff
Below I have posted the entire JavaScript code. You don’t need to try to take it in all at once, as I’m going to go into further explanation for each function, but just seeing how it looks initially is easier to understand than looking at each piece, and then putting it together later.
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 | window.onload = init; function init() { document.getElementById('typedContent').innerHTML = document.getElementById('textarea').value; document.getElementById('headerContent').innerHTML = document.getElementById('title').value; } function updateTitle(tid, hid) { var headtext = document.getElementById(tid).value; document.getElementById(hid).innerHTML = headtext; } function updateText(tid, pid) { var typedtext = document.getElementById(tid).value; document.getElementById(pid).innerHTML = typedtext; } function updateCat(tid, catid) { var element = document.getElementById(tid); if(catid == 1) { var catText = "Apple"; } else if(catid == 2) { var catText = "Design"; } else if(catid == 3) { var catText = "Gadgets"; } else if(catid == 4) { var catText = "Hardware"; } element.innerHTML = "Category: <strong>"+catText+"</strong>"; } |
The first function that executes when the page loads would be the “init” function. This function goes and checks the value of both the header textfield and the description textarea. If either of them has content in them, it is automatically placed into it’s respective place at the bottom of the page. After that is executed, all we have left are the functions that are individually called with each action. We’ll start with the title:
1 2 3 4 | function updateTitle(tid, hid) { var headtext = document.getElementById(tid).value; document.getElementById(hid).innerHTML = headtext; } |
This function is called whenever a key is lifted up or something is pasted into the textfield. It takes two parameters, “tid” which is the id of the textfield we’ll be grabbing the text from and “hid”, which is the id of the header tag that will be holding our text value. This function, in plain English says “get the value from the textarea with the id from “tid” and insert that value into the element on the page with the id in “hid”. It’s a pretty simple function once you grasp it, and it’s also very similar to our description function:
1 2 3 4 | function updateText(tid, pid) { var typedtext = document.getElementById(tid).value; document.getElementById(pid).innerHTML = typedtext; } |
Here we have a very similar function as the last one, where we take two params. “tid” is very similar to the last one, where we pass in the id of the textfield that we are taking the text from, and “pid” is the id of the paragraph that will hold the content. As you can see by the two lines, it does the exact same thing as the previous function, just with slightly different values. Realistically, you could just combine both functions into one universal function that works with all textareas and textfields, but that will be a bonus for you to figure out.
So now that we have discussed how to grab the text we’ve entered and moved it, let’s examine our last function which works with radio buttons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function updateCat(uid, catid) { var element = document.getElementById(uid); if(catid == 1) { var catText = "Apple"; } else if(catid == 2) { var catText = "Design"; } else if(catid == 3) { var catText = "Gadgets"; } else if(catid == 4) { var catText = "Hardware"; } element.innerHTML = "Category: <strong>"+catText+"</strong>"; } |
The first thing I do here is declare a variable called “element”. This is the element on the page that will be updated, therefore I called the id parameter “uid”. Once we define the element we’ll be updating, we need to get the value of whatever the radio button is currently. I did this by calling the function whenever somebody clicks on a radio button and then passing it’s value.
So if you look back at the HTML earlier, design has a value of 2. So if we click on the design radio button it will pass a catid of 2, therefore the second if statement will be true. This will set the category text to “design”, which is what we use in the last section to output the content to the paragraph. We output some strong tags around the category to make it more visible, though the document isn’t styled as pretty as it could be, so feel free to spruce that up!
So that is basically everything, hopefully it’s easy to understand. Again if you want to view a live demo of this small script you can check it out here.
