slowlearner Posted March 19, 2009 Share Posted March 19, 2009 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> Quote Link to comment Share on other sites More sharing options...
Floydian Posted March 20, 2009 Share Posted March 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
slowlearner Posted March 22, 2009 Author Share Posted March 22, 2009 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> Quote Link to comment Share on other sites More sharing options...
Floydian Posted March 23, 2009 Share Posted March 23, 2009 Soz I can't read your mind. And you had trouble with? (please don't say all of it...) The deal I made does basically what your script does, but more efficiently. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.