How to set placeholder text on form fields

JavaScript
1

Is there a way, I know there is, in which I set initial Values for Form Fields, and when the user clicks inside the field, the initial value is reset

example:

<div style=“background-color: #999999”>
<p style=“text-align: center;”><span style=“color: #0000ff;”>Fill Out This Form to get a Free Uniform, <br>
Free Private lesson &
Free 30 Days of Training!</span></p>
<form id=“rmform” name=“rmform” method=“post” action=“https://addmembers.com/rainmaker/process/”>
<table border=“0” cellspacing=“3” cellpadding=“3” >
<tr>
<td width=“5%”><input name=“SID” type=“hidden” id=“SID” value=“1197” />
<input name=“AutoResponder” type=“hidden” id=“AutoResponder” value=“True” />
<input name=“Tags” type=“hidden” id=“Tags” value=“” />
<input name=“SendTo” type=“hidden” id=“SendTo” value="XXX@xyz.com" />
<input name=“rmid” type=“hidden” id=“rmid” value=“” />
<input name=“formID” type=“hidden” id=“formID” value=“6BAD62B41BB0E8DA42E62E9A” /></td>
</tr>
<tr>
<td> </td>
<td ><label for=“FName”></label>
<input name=“FName” type=“text” id=“FName” value=“First Name” /> <---------------- User would Click In this Field to enter First Name, but upon clicking “First Name” is cleared out
<input name=“FNameReq” type=“hidden” id=“FNameReq” value=“true” /> </td></tr>
<tr>
<td> </td>
<td><label for=“LName”></label>
<input name=“LName” type=“text” id=“LName” value=“Last Name” /> <---------------- User would Click In this Field to enter LAST Name, but upon clicking “Last Name” is cleared out
<input name=“LNameReq” type=“hidden” id=“LNameReq” value=“true” /></td></tr>
<tr>
<td> </td>
<td><label for=“Email”></label>
<input name=“Email” type=“text” id=“Email” value=“Email” />
<input name=“EmailReq” type=“hidden” id=“EmailReq” value=“true” /></td></tr>
<tr>
<td> </td>
<td><label for=“Phone”></label>
<input name=“Phone” type=“text” id=“Phone” value=“Phone Number” />
<input name=“PhoneReq” type=“hidden” id=“PhoneReq” value=“true” /></td></tr>
<tr>
<td colspan=“2” align=“center”>30 Days Free!</td>
</tr>
<tr>
<td colspan=“2” align=“center”><input id=“FlowTags” name=“FlowTags” type=“checkbox” value=“prospect” /></td>
</tr>
<tr><td> </td><td><input name=“ReturnURL” type=“hidden” id=“ReturnURL” value=“http://hermosaboxingworks.com” /></td></tr><tr><td> </td><td><input type=“submit” name=“Submit” id=“Submit” value=“Submit” /></td></tr>
</table>
</form>

My .js Skills are Feeble, but from a class I took awhile back, I do recall a function that would do this, My
Emailer platform has rendered “First Name JOE BLOW”, “Last Name Jebadiah”
when they entered their information, the end user, but NOT clear out the form field manually.

Thanks

Mike

2

Hi mkersgard. Welcome to the forums. :slight_smile: (This seemed better as a separate thread.)

You can do it with JavaScript, but also with HTML5. With the patter, you can just add

placeholder="Last Name"

etc. to your form inputs.

However, that won’t work in older browsers.

Let us know if you’d prefer some JS.

3

Thanks!! Which ever one would be easiest, my .js skills are quite feeble

thanks

4

Thanks!! Which ever one would be easiest, my .js skills are quite feeble

thanks

5

Then use the HTML5 placeholder - it means no JavaScript code at all.


<input type="text" name="username" placeholder="Enter your username">

When you click in there and start typing, the placeholder then goes away.

6

Anyhow, now that I’m home, here’s a JS example I’ve found useful. It’s from Jeremy Keith’s DOM Scripting book.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Placeholder text</title>	
	
<script type="text/javascript" >

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function resetFields(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.defaultValue) continue;
    element.onfocus = function() {
    if (this.value == this.defaultValue) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.defaultValue;
      }
    }
  }
}


function prepareForms() {
  for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
    thisform.onsubmit = function() {
      return validateForm(this);
    }
  }
}

addLoadEvent(prepareForms);
</script>
	
	
</head>

<body>
	<form method="post" action="">
		<label for="name">Name</label><br>
		<input name="name" type="text" id="name" value="Name"><br>
		
		<label for="email">Email Address</label><br>
		<input name="email" type="text" id="email" value="Email"><br>
		
		<label for="phone">Telephone</label><br>
		<input name="phone" type="text" id="phone" value="Telephone"><br>
		
		<input type="submit" name="submitted" value="Send">
	</form>
</body>
</html>