Q:

How to display input back to the user on an HTML page?

I am new to HTML and I am trying to create a script to display user input in a message box. I have created a textbox and validated it with a regular expression (alphabet only).
Now I need to display the user input in the page itself. How can I do this with JavaScript?
I need to display all the user inputs in the page itself. I need to display the two letter word in one container and three letter word in another container.
This is the code I tried.
<html>
    <head>
        <style type="text/css">

        </style>
        <script type="text/javascript">
            function Allow() {
                if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
                    user.title.value = "";

                    alert("Please Enter only alphabets");
                }
            }

            var titles = [];
            var titleInput = document.getElementById("title");
            var messageBox = document.getElementById("display");

            function insert( ) {
                titles.push(titleInput.value);
                clearAndShow();
            }

            function clearAndShow() {
                // Clear our fields
                titleInput.value = "";

                // Show our output
                messageBox.innerHTML = "";
                messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";

        </script>
    </head>

    <body>
        <p>form input</p>
        <form name="user"  action="" onsubmit=" "  method="post">

            User<input id="title" type="text" maxlength="4"  onkeyup=" Allow() " >
                <input type="submit" value="Save/Show" onclick=" insert() " />
        </form>
        <div id="display"></div>
    </form>

    </body>
</html>

A:

For a basic client-side validation, start with document.getElementById('foo') and HTML formed like <input id='foo' value='bar' />.  You can validate and repopulate using .value, somthing like this:
var foo = document.getElement('foo');
if (foo.value.match('your regex')) {
   foo.value = foo.value.substr(0, 3);
}

For server-side saving and validation, unfortunately you can't do this with only Javascript.
Javascript is client-side, which means it's trapped inside your browser.
To send values back to the server, you need something like PHP or Ruby to receive POSTed form values and write them to a file.  Javascript can't write to files for security reasons.
To use Ruby or PHP with Javascript, you could do it dynamically with an Ajax request (intermediate skill level) or by submitting a <form> element (beginner skill level).

UPDATE...after you showed some code :)
You need to put the <script> tag after the body in the HTML is finished.  When you do document.getElementById("title"), it stays null because the HTML isn't finished rendering!
Otherwise, you did everything right.  Here's your code, a little cleaner, and working.
<html><head></head><body>

<input id="title" type="text" maxlength="4"  onkeyup="Allow()" >
<input type="submit" value="Save/Show" onclick="insert()" />
<div id="display"></div>

<script type="text/javascript">
var titles  = [];
var titleInput  = document.getElementById("title");
var messageBox  = document.getElementById("display");

function Allow(){
    if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value !="") {
        user.title.value="";
        alert("Please Enter only alphabets");
    }
}

function insert () {
    titles.push(titleInput.value);
    clearAndShow();
}

function clearAndShow () {
    titleInput.value = "";
    messageBox.innerHTML = "";
    messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
}
</script>
</body>

</html>

Your code didn't include the part about the "two letter container" and the "three letter container" so the best I can do there is recommend substr() again.

LAST UPDATE
Here's a basic implementation of two and three letter strings, input delimited using commas like foo,bar,fo,ba:
<html><head></head><body>

<input id="title" type="text" >
<input type="submit" value="Save/Show" onclick="clearAndShow()" />
<div id="display2letter"></div>
<div id="display3letter"></div>

<script type="text/javascript">
var titleInput  = document.getElementById("title");
var display2letter  = document.getElementById("display2letter");
var display3letter  = document.getElementById("display3letter");

function clearAndShow () {
    // Split input box value by comma
    titles = titleInput.value.split(",");

    // Reset display divs
    display2letter.innerHTML = "";
    display3letter.innerHTML = "";

    // Cache length so it's not recalculated on each iteration.
    var len = titles.length;
    var twoletter = [];
    var threeletter = [];

    for (i = 0; i < len; i++) {
        // Check for a-z, A-Z, length 2 or 3
        if (!titles[i].match(/^[a-zA-Z]{2,3}$/)) {
            throw new Error("Please use only alphabet letters.");
            break;
        }

        // Dump into storage arrays.
        if(titles[i].length == 2) {
                twoletter.push(titles[i]);
        }
        else {
            threeletter.push(titles[i]);
        }
    }

    display2letter.innerHTML += "Titles, 2 letters: " + twoletter.join(", ") + "<br/>";
    display3letter.innerHTML += "Titles, 3 letters: " + threeletter.join(", ") + "<br/>";
}
</script>
</body>

</html>

