www.webdeveloper.com
Results 1 to 2 of 2

Thread: Form Input Values and Javascript

  1. #1
    Join Date
    Jan 2011
    Posts
    8

    Form Input Values and Javascript

    Hello forum members,

    I am very new to javascript and really appreciate the support I've gotten from this forum so far. I wonder if you can help me figure something else out?

    My issue starts with a simple three input form like the one below.

    <form action="" method="">
    <input type="text" value="Name:" />
    <input type="text" value="Email:" />
    <textarea>
    Write your message.</textarea>
    </form>
    As you can see, I have set the title of each field as the value. This approach seems to reduce the clutter of a typical form, however- it raises one important challenge. The value must be highlighted and deleted when the user goes to type something in.

    The functionality I'm looking for clears the value when a person clicks OR TABS in to the input field. It is also important that the value never be empty because my values title each field and without that reminder, who knows what the user might do.

    I've done my best to start simple. Google has pointed me in the following direction:

    <form action="" method="" name="myform">
    <input type="text" value="Name:" name="myname" onclick="document.myform.myname.value='';"/>
    <input type="text" value="Email:" name="myemail" onclick="document.myform.myemail.value='';"/>
    <textarea onclick="document.myform.mytext.value='';">
    Write your message.</textarea>
    </form>
    This is a great, clean and simple solution.. to the first of three problems. All this code does is remove the value. When the field loses focus it remains empty. Further to that, once the value is cleared even refreshing my browser doesn't return the titles.

    This functionality seems so practical in theory. Please send me any ideas you have!

    THANKS!

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Code:
     
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                window.onload=function(){
                    var formInputs = document.getElementById("myForm").getElementsByTagName('input');
                    textInputs = new Array();
                    for(i=0; i < formInputs.length; i++){
                        if(formInputs[i].type == 'text') {
                            textInputs.push(formInputs[i]);
                        }
                    }
                    textInputs.push(document.getElementById("myForm").getElementsByTagName('textarea')[0])
                    for(i=0; i < textInputs.length; i++){
                        textInputs[i].onfocus = function(){
                            clearDefault(this);
                        }
                        textInputs[i].onblur = function(){
                            setDefault(this);
                        }
                    }
                }
                function clearDefault(elem){
                    elem.value = '';
                }
                function setDefault(elem){
                    if(elem.value == ''){
                        elem.value = elem.defaultValue;
                    }
                }
            </script>
        </head>
        <body>
            <form id="myForm" action="" method="">
                <input type="text" value="Name:" />
                <input type="text" value="Email:" />
                <textarea>Write your message.</textarea>
            </form>
        </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles