Question

104

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

rated 0 times [ 111] [ 7] / answers: 1 / hits: 45766 / 11 Years ago, fri, october 18, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

scarlett

Add To Favorites

Follow

Total Points: 491

Total Questions: 94

Total Answers: 100

Location: New Caledonia

Member since Thu, Mar 23, 2023

1 Year ago

answered 11 Years ago darennevina · Accepted Answer

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>