Member Avatar for rybo

Hey guys, so i'm not great with JavaScript since i mostly do HTML and C++...

ok, so i have a site with a "contact" box that sends me the users message. i want the text to clear when the user clicks on it, but for some reason, i can't get it right...

any help?

this is the html so far...

...

<form action="gdform.asp" method="post">
<input type="hidden" name="subject" value="Message from User" />
<input type="hidden" name="redirect" value="index.htm" />

<FONT size="2"><p align="center">
<INPUT type="text" name="Email Address" value="your email" id="Email Address" size="40"></text>
<FONT size="2"><p align="center">

<textarea name="Message" id="Message" cols="30" rows="5">message...</textarea>
<p align="center"><INPUT type="submit" name="Submit" value="Send">
<INPUT type="reset" name="reset" value="Cancel">
</FORM>
Edited by Dani because: Formatting fixed
  • 3 Contributors
  • 2 Replies
  • 97 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by aravelli

Dani AI

Generated

Short answer: use the HTML5 placeholder attribute for this use case, and only fall back to JavaScript for very old browsers. placeholder shows grey hint text that disappears automatically on focus, so you do not need to clear values manually. See the HTML5 placeholder notes here: input placeholder docs and textarea placeholder docs. Browser support is broad; polyfill only when necessary (can I use).

Notes on the replies above: was right to suggest cleaning up markup. 's JavaScript shows the right intent but has three practical problems: (1) HTML id values must not contain spaces, which breaks selectors and tooling (see id attribute rules); (2) inputs and textareas use the .value property, not .innerText; and (3) inline onclick is fragile — prefer unobtrusive handlers or addEventListener.

If a placeholder is not acceptable (accessibility or persistent default value), attach event listeners that clear only when the field equals the default text and restore it on blur if empty. Example pattern:

<!-- use placeholder for modern browsers -->
<input id="email" name="email" type="email" placeholder="your email">
<textarea id="message" name="message" placeholder="message..."></textarea>
// fallback for old browsers: only clear if value equals the default hint
document.addEventListener('DOMContentLoaded', function () {
  // detect placeholder support before adding fallback handlers
  if ('placeholder' in document.createElement('input')) return;
  // add focus/blur handlers that clear/restore default text safely
});

Accessibility caution: placeholders are not a replacement for visible labels — always include a proper <label> for each control.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

All of your tags should be lowercase.

You need JavaScript to do something dynamic such as what you want..

Member Avatar for aravelli 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
  function ValidateEmail(){
    document.getElementById('Email Address').innerText = "";
  }
  function ValidateMessage(){
    document.getElementById('Message').innerText = "";
  }
  function Validate(){
    document.getElementById('Email Address').innerText = "";
    document.getElementById('Message').innerText = "";
  }
  </script>
 </HEAD>
 <BODY>
<form action="gdform.asp" method="post">
<input type="hidden" name="subject" value="Message from User" />
<input type="hidden" name="redirect" value="index.htm" />
<p align="center">
<INPUT type="text" name="Email Address" value="your email" id="Email Address" size="40" onClick="ValidateEmail()"></p>
<p align="center"><textarea name="Message" id="Message" cols="30" rows="5" onClick="ValidateMessage()">message...</textarea></p>
<p align="center"><INPUT type="submit" name="Submit" value="Send">
<INPUT type="button" name="reset" value="Cancel" onClick="Validate()">
</p>
</FORM> 
 </BODY>
</HTML>

I HOPE THIS WILL HELP YOU

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.