Help with initial form field values

Posted on 2007-10-16
Last Modified: 2008-01-09
I have the following form with initial values in the fields. I would like this to happen: When the user clicks in a field, the initial value disappears. If they click out of the field, with nothing entered, then the initial value re-appears.

<form action="contact.asp" id="form" style="margin:0; padding:0" method="post">
                                                  <div align="center">
                                                    <input name="Name" type="text"  class="w" id="Name" style="width:210px; height:25px;  " value=" &nbsp;your name"  >
                                                    <input name="Email" type="text"  class="w" id="Email" style="width:210px; height:25px; " value=" &nbsp;e-mail" >
                                                    <input name="Phone" type="text"  class="w" id="Phone" style="width:210px; height:25px; " value=" &nbsp;phone" >
                                                    <textarea name="Message"  cols="35" rows="35" class="w" id="Message" style="width:210px; height:90px; overflow:hidden "> &nbsp;message</textarea>
                                                  <div style="margin:12 15 0 50px;"><input name="clear" type="image" id="clear" style=" border-style:none  " src="images/6_k1.gif" onClick="this.form.reset(); return false;"><input name="submit"  type="image" id="submit" style="border-style:none; margin-left:16px "  src="images/6_k2.gif" >
Question by:isaacr25
    LVL 10

    Accepted Solution

    Hello isaacr25,

    Try the following code to achieve what you want:

    <script type="text/javascript">
     function textClear(ctrl)
        if (ctrl.value == ctrl.defaultValue)
          ctrl.value = "";

     function textRestore(ctrl)
        if (ctrl.value == "")
          ctrl.value = ctrl.defaultValue;

    <input type="text" value="Initial Value" onfocus="textClear(this)" onblur="textRestore(this)"/>


    LVL 9

    Assisted Solution

    Funny enough, Roger Johansson just published an article about how to do this:

    Here is the sample form:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now