Jump to content

textfield color change


slowlearner

Recommended Posts

I am new to javascript and web development in general and got a couple of questions.

 

1. Would this be a sane way to achieve the objective?

2. How would I get more elements into the function like lastname?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
function see_red()
	{

	var input = document.getElementById('firstname');

   		if (input.value.length < 2)
		{
			input.style.border='2px solid red';
			return false;
		}
		else 
		{
			input.style.border='2px solid green';
			return true;
		}
	}

function see_green()
	{

	var input = document.getElementById('firstname');

   			if (input.value.length < 2)
			{
				input.style.border='2px solid red';
				return false;
			}
			else 
			{
				input.style.border='2px solid green';
				return true;
			}
	}
</script>
<body>

<form id="form1" name="form1" method="post" action="">
   		<p><input type="text" name="firstname" id="firstname" onclick="see_red()" onchange="see_green()" /></p>
		<p><input type="text" name="lastname" id="lastname" /></p>
	<p><input type="text" name="email" id="email" /></p>
    	<p><textarea name="msg" cols="30" rows="5" id="msg"></textarea></p>
		<p><input type="submit" name="submit" id="button" value="Submit" /></p>
</form>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/150193-textfield-color-change/
Share on other sites

This page here -> http://www.steelbreeze.us/play_ground/clicky.html

 

Will show you how to do what you want with one function (so long as the each element should have the same things done to it) and you can use the one function with as many elements as you want.

 

Hope that helps.

Thanks for the help but I can't quit seem to figure it.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
function cChange(elm)
      {
      var some = (elm.name);
   	/*alert(some);*/
         if (some.value.length == "") 
         	{
            	some.style.border='2px solid red';
            	return false;
         }else {
            some.style.border='2px solid green';
            return true;
         }
      }	
</script>
<body>

   <form id="form1" name="form1" method="post" action="">
         <p><input type="text" name="firstname" id="first" onclick="cChange(this)" onkeyup="cChange(this)" /></p>
       <p><input type="text" name="lastname" id="last" onclick="cChange(this)" onkeyup="cChange(this)" /></p>
      <p><input type="text" name="email" id="email" /></p>
       <p><textarea name="msg" cols="30" rows="5" id="msg"></textarea></p>
       <p><input type="submit" name="submit" id="button" value="Submit" /></p>
   </form>

</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.