[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Help with initial form field values

Posted on 2007-10-16
2
Medium Priority
?
1,831 Views
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"  >
                                                    <br>
                                                    <input name="Email" type="text"  class="w" id="Email" style="width:210px; height:25px; " value=" &nbsp;e-mail" >
                                                    <br>
                                                    <input name="Phone" type="text"  class="w" id="Phone" style="width:210px; height:25px; " value=" &nbsp;phone" >
                                                    <br>
                                                    <textarea name="Message"  cols="35" rows="35" class="w" id="Message" style="width:210px; height:90px; overflow:hidden "> &nbsp;message</textarea>
                                                  </div>
                                                  <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" >
                                                  </div>
</form>
0
Comment
Question by:isaacr25
2 Comments
 
LVL 10

Accepted Solution

by:
archang3l earned 1000 total points
ID: 20090784
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;
 }
</script>

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

Regards,

archang3l
0
 
LVL 9

Assisted Solution

by:fuzzboxer
fuzzboxer earned 1000 total points
ID: 20095984
Funny enough, Roger Johansson just published an article about how to do this:  http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/

Here is the sample form:  http://www.456bereastreet.com/lab/autopopulating-text-input-fields/
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…
Suggested Courses

834 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