Jump to content

PHP Form Field Question


john.grisum
 Share

Recommended Posts

I have form fields in a PHP contact form on my website ( www.freemyblackberry.com/freecode ). I have placed text in the fields that disappear when the user selects the box, but what I need is for the text that the user writes to stay in that field regardless of selection thereafter. For example: once the user clicks or enters the field the initial text disappears but if the person makes a mistake and goes back to the field the entire text will disappear again. How do I get the onfocus to work only when the default value is there?HTML example of field.....

<li> <label for="email">Email<span class="red">* </label> <input id="email" name="email" type="text" class="text" value="Example: person@yahoo.com" onfocus="this.value=''"/> </li>
Edited by john.grisum
Link to comment
Share on other sites

Whoa.. I most definitely ###### at JavaScript.. Here's what I came up with :)Example:form name is "login"input name is "username"

// onfocus="onFocus();"function onFocus(){	// Save the length of the value and the value itself..	var valueLength = document.login.username.value.length;	var value = document.login.username.value;	// If the length of the value is greater than 1..	if(valueLength > 1){		// And if the value is "username"..		if(value == "username"){			// Set the value to nothing..			document.login.username.value = "";		}		// Else do nothing..		else{			// Nothing happens..		}	}}	// onblur="onBlur();"function onBlur(){	// Save the length of the value and the value itself..	var valueLength = document.login.username.value.length;	var value = document.login.username.value;	// If value is less than 2..	if(valueLength < 2){		// Set the field to "username" again..		document.login.username.value = "username";	}	// Else do nothing..	else{		// Nothing happens..	}}

Link to comment
Share on other sites

I have also been fiddling around with changing the value text to a lighter colour, but have had issues...I need the valued text to be lighter gray colour and when the user inputs information it must turn black. Gray before, Black during and after user input....<input id="imei" name="imei" type="text" class="text" value="Example: 123456789012345" onfocus='this.value="";this.onfocus="";'How do I add this properly?style="color:#999;" onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"onfocus="this.value=''; this.style.color = '#000';"/>

Edited by john.grisum
Link to comment
Share on other sites

you need a reference to the original value, so you can compare to see if value has changed or not, most of the time this would be used with 'title' attribute or 'rel'html

<input id="imei" name="imei" type="text" class="text" title="Example: 123456789012345" value="Example: 123456789012345" onblur="checkvalue(this)" onfocus="clearvalue(this)"/>

css

.text{color:#999999;}

js

<script type="text/javascript"> /*<![CDATA[*//*---->*/  function clearvalue(element){ if(element.value==element.title)	 {	 element.value="";	 } element.style.color="#000000"; }   function checkvalue(element){  if(element.value=="" || element.value==element.title) { element.value=element.title element.style.color="#999999"; } }  /*--*//*]]>*/ </script>

Edit: or just use the defaultValue instead without title value

function clearvalue(element){if(element.value==element.defaultValue)	{	element.value="";	}element.style.color="#000000";}function checkvalue(element){if(element.value=="" || element.value==element.defaultValue){element.value=element.defaultValue;element.style.color="#999999";}}/*--*//*]]>*/</script>

Edited by dsonesuk
Link to comment
Share on other sites

At this point, you're seriously cluttering up your tag and just asking for a typo. Try moving all that into a script where you can look at it.Frankly, I think anyone who can use a ternary operator correctly AND knows about the defaultValue property can probably work this out on his own. Give it a try. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...