1.

Solve : Form field prompts?

Answer»

Hi, I have several text fields in a (frontPage) form. I would like to have words (in light gray) in the text boxes to prompt the USER as to the information needed. As soon as the user starts to type in the text box, the 'prompt' would disappear and only the users text would be submitted. I see this used all the time  but don't know how it is done. Is it HTML or java or what?  JavaScript.

Use this:
Code: [Select]<input type="text" value="Input here" onfocus="this.value='';" />
OK, I finally got it to work. The text I want is in the field until I clink into it, what is typed into the field is prosessed by the CGI script. That is all great. What does not happen is the text I want as a prompt is not gray and italic like I want. any suggestions? Here is what I have in the code:

  MAKE:       
   

MODEL:Need more of a script so...

Place this in the
Code: [Select]<script type="text/javascript">
function changeColor()
{
  var input = getElementById('MAKE');
  input.style.Color = "#000";
  input.style.fontStyle = "normal";
}
</script>

And here's the input field:
Code: [Select]<input type="text" style="color:#CCC;font-style:italic;" value="Example Dodge" onfocus="changeColor()" name="MAKE" id="MAKE" size="20" />
OK, Now I know I am becomming a pain.
1) I inserted the script as the last part between HEAD and /HEAD. Do I Need to repeat:
             {
  var input = getElementById('MAKE');
for each time I use this, changing 'MAKE' to each Id? I want to use this for 8 fields!
2) The font is changing correctly but when the user puts data in the field the prompt does not disappear. Stays in background as user types input.
Here is what I did:


function changeColor()
{
  var input = getElementById('MAKE');
  input.style.Color = "#000";
  input.style.fontStyle = "normal";
}



  MAKE:
            


Thanks, Ed Quote
for each time I use this, changing 'MAKE' to each Id? I want to use this for 8 fields!
Sorry, I didn't realise this was for more than one. You can use this instead:

Code: [Select]<script type="text/javascript">
function changeColor(id)
{
  var input = getElementById(id);
  input.style.Color = "#000";
  input.style.fontStyle = "normal";
}
</script>

And the input field:
Code: [Select]<input type="text" style="color:#CCC;font-style:italic;" value="Example Dodge"
onfocus="changeColor(this.id); this.value='';" name="MAKE" id="MAKE" size="20" />
All you have to do is add id="MAKE" to every input field...as well as the onfocus function.

Quote
OK, Now I know I am becomming a pain.
Don't worry about it. OK. I'm learning.
 See, you can teach an old dog new tricks!
This part is still a problem:
2) The font is changing correctly but when the user puts data in the field the prompt does not disappear. Stays in background as user types input.
Thanks. Ed Quote
2) The font is changing correctly but when the user puts data in the field the prompt does not disappear. Stays in background as user types input.
Did you add onfocus="changeColor(this.id); this.value='';" to the field?Here is what i have:



I am ALSO getting a script error on the above line.

Maybe the line before is messing it up with the validation?



EdHmmm, okay try this:

Code: [Select]<input type="text" style="color:#808080;font-style:italic; margin-left:Dodge" value="Example Dodge"
onfocus="changeColor(this.id);" onclick="this.value=";" name="MAKE" id="MAKE" size="20" maxlength="20" />Hi again,

While I was taking your time trying to figure my error I reviewed everything and found the problem.
I had used a " instead of  ' ' , as in      this.value=";"         should have been    this.value='';"   
Now it works and no script error.

Thank You so very much for your patience with me.

The related issue I'm having is with the confirmation page.

My ISP PROVIDES one CGI script which they control. It gives a confirmation page to the customer. This page is called   thankyou.html   and it is in my control.  The script also sends an e-mail. The e-mail SHOWS the field id and the user input.
I can not get the user input to show up on the confirmation page. In the design of the page it shows the field confirmation as a webbot so that part appears to be correct. When it displays after input, it is blank where the user input should be. Is there a way to get this field data to the e-mail and the confirmation page?
Thanks, Ed
Have you got a link to the page?Yes,

www.rubins.com/testing.html


Discussion

No Comment Found

Related InterviewSolutions