[RESOLVED] Problem with getElementByID

Hi there guys I want the error i.e "Not Valid Email" of my email to appear infront of EMAIL: by using "onBlur", like in case of password the error of "Password Do not Match" appears infront of Confirm password. can some me tell me what iam doing wrong??

Code:

<html> <head> <title>Form</title> <link rel="stylesheet" type="text/css" href="form.css" /> </head> <body> <script> function s_form() { var uname=document.getElementById("uname").value; var pass=document.getElementById("pass").value; var conpass=document.getElementById("conpass").value; var email=document.getElementById("email").value; var fname=document.getElementById("fname").value; var lname=document.getElementById("lname").value; var atpos=email.indexOf("@"); var dotpos=email.lastIndexOf("."); if(uname=="" || pass=="" || email=="" || fname=="" || lname=="") { document.getElementById("imp").innerHTML="You must fill all the * fields"; } } function checkmail() { var x=document.getElementById("pa"); if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { x.innerHTML="Not Valid Email"; x.style.color="red"; } else { document.write("yea"); } } function checkpass() { var pass_res=document.getElementById("ap"); if (pass=="" || conpass=="") { pass_res.innerHTML="Enter Password"; } else { if (pass != conpass) { pass_res.innerHTML="Password Do not Match"; } else { pass_res.innerHTML="Password Match"; pass_res.style.color="blue"; } } } </script> <form> <h2>Enter Info for Sign UP</h2><br/> <label id="imp">Fill all the * Fields</label><br/><br/> Enter User Name:<input id="uname" type="text" /><b>*</b><br/></div> Enter Password:<input id="pass" type="password"/><b>*</b><br/></div> Confirm Password:<input id="conpass" type="password" onBlur="checkpass();" /><span id="ap"></span><br/> Enter Email:<input id="email" type="text" onBlur="checkmail();"/><label id="pa"></label><br/> Enter First Name:<input id="fname" type="text"/><b>*</b><br/> Enter Last Name:<input id="lname" type="text"/><b>*</b><br/><br/> <input type="button" value="submit" onClick="s_form();"/> </form> </body> </html>

It looks like the fields populated by getElementById don't get executed until "submit" has been clicked so the Blur functions never get run with the latest data.

Hi there amir786_z,

These lines..

Code:

var email=document.getElementById("email").value; var atpos=email.indexOf("@"); var dotpos=email.lastIndexOf(".");

...should be in your "checkmail()" function instead of your "s_form()" function. ;)

coothead

Quote:

Originally Posted by coothead

Hi there amir786_z,

These lines..

Code:

var email=document.getElementById("email").value; var atpos=email.indexOf("@"); var dotpos=email.lastIndexOf(".");

...should be in your "checkmail()" function instead of your "s_form()" function. ;)

coothead

Thanks sir,
It worked :)

One more problem Iam having when I declare all the variables outside the functions to make them global, none of the function works. whats the problem?

Hi there amir786_z,

try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Form</title> <link rel="stylesheet" type="text/css" href="form.css"> <script type="text/javascript"> (function() { 'use strict'; var theform,imp,uname,pass,conpass,email,fname,lname,atpos,dotpos,x,pass_res,sbmt,clear; function init(){ theform=document.getElementById('theform'); imp=document.getElementById('imp'); uname=document.getElementById('uname'); pass=document.getElementById('pass'); conpass=document.getElementById('conpass'); email=document.getElementById('email'); fname=document.getElementById('fname'); lname=document.getElementById('lname'); pass_res=document.getElementById('pass_res'); sbmt=document.getElementById('sbmt'); clear=document.getElementById('clear'); theform.reset(); conpass.onblur=function() { checkpass(); } email.onblur=function() { checkmail(); } sbmt.onclick=function() { s_form(); } clear.onclick=function() { imp.innerHTML='Fill all the * Fields'; pass_res.innerHTML=''; } } function s_form(){ if((uname.value=='')||(pass.value=='')||(email.value=='')||(fname.value=='')||(lname.value=='')){ imp.innerHTML='You must fill all the * fields'; } } function checkmail() { atpos=email.value.indexOf('@'); dotpos=email.value.lastIndexOf('.'); x=document.getElementById('pa'); if(atpos<1||dotpos<atpos+2||dotpos+2>=email.length){ x.innerHTML='Not Valid Email'; x.style.color="red"; } else { x.innerHTML=''; } } function checkpass() { if((pass.value=='')||(conpass.value=='')){ pass_res.innerHTML='Enter Password'; } else { if(pass.value!=conpass.value){ pass_res.innerHTML='Password Do not Match'; } else { pass_res.innerHTML='Password Match'; pass_res.style.color='blue'; } } } window.addEventListener? window.addEventListener('load',init,false): window.attachEvent('onload',init); })(); </script> </head> <body> <form id="theform" action="#"> <h2>Enter Info for Sign UP</h2> <p id="imp">Fill all the * Fields</p> <div> <label for="uname">Enter User Name:</label> <input id="uname" type="text"><b>*</b> </div><div> <label for="pass">Enter Password:</label> <input id="pass" type="password"><b>*</b> </div><div> <label for="conpass">Confirm Password:</label> <input id="conpass" type="password"> <span id="ap"></span> </div><div> <label for="email">Enter Email:</label> <input id="email" type="text"> <span id="pa"></span> </div><div> <label for="fname">Enter First Name:</label> <input id="fname" type="text"><b>*</b> </div><div> <label for="lname">Enter Last Name:</label> <input id="lname" type="text"><b>*</b> </div><div> <input id="sbmt" type="button" value="submit"> <input id="clear" type="reset" value="clear"> </div> <div id="pass_res"></div> </form> </body> </html>

coothead

Quote:

Originally Posted by coothead

Hi there amir786_z,

try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Form</title> <link rel="stylesheet" type="text/css" href="form.css"> <script type="text/javascript"> (function() { 'use strict'; var theform,imp,uname,pass,conpass,email,fname,lname,atpos,dotpos,x,pass_res,sbmt,clear; function init(){ theform=document.getElementById('theform'); imp=document.getElementById('imp'); uname=document.getElementById('uname'); pass=document.getElementById('pass'); conpass=document.getElementById('conpass'); email=document.getElementById('email'); fname=document.getElementById('fname'); lname=document.getElementById('lname'); pass_res=document.getElementById('pass_res'); sbmt=document.getElementById('sbmt'); clear=document.getElementById('clear'); theform.reset(); conpass.onblur=function() { checkpass(); } email.onblur=function() { checkmail(); } sbmt.onclick=function() { s_form(); } clear.onclick=function() { imp.innerHTML='Fill all the * Fields'; pass_res.innerHTML=''; } } function s_form(){ if((uname.value=='')||(pass.value=='')||(email.value=='')||(fname.value=='')||(lname.value=='')){ imp.innerHTML='You must fill all the * fields'; } } function checkmail() { atpos=email.value.indexOf('@'); dotpos=email.value.lastIndexOf('.'); x=document.getElementById('pa'); if(atpos<1||dotpos<atpos+2||dotpos+2>=email.length){ x.innerHTML='Not Valid Email'; x.style.color="red"; } else { x.innerHTML=''; } } function checkpass() { if((pass.value=='')||(conpass.value=='')){ pass_res.innerHTML='Enter Password'; } else { if(pass.value!=conpass.value){ pass_res.innerHTML='Password Do not Match'; } else { pass_res.innerHTML='Password Match'; pass_res.style.color='blue'; } } } window.addEventListener? window.addEventListener('load',init,false): window.attachEvent('onload',init); })(); </script> </head> <body> <form id="theform" action="#"> <h2>Enter Info for Sign UP</h2> <p id="imp">Fill all the * Fields</p> <div> <label for="uname">Enter User Name:</label> <input id="uname" type="text"><b>*</b> </div><div> <label for="pass">Enter Password:</label> <input id="pass" type="password"><b>*</b> </div><div> <label for="conpass">Confirm Password:</label> <input id="conpass" type="password"> <span id="ap"></span> </div><div> <label for="email">Enter Email:</label> <input id="email" type="text"> <span id="pa"></span> </div><div> <label for="fname">Enter First Name:</label> <input id="fname" type="text"><b>*</b> </div><div> <label for="lname">Enter Last Name:</label> <input id="lname" type="text"><b>*</b> </div><div> <input id="sbmt" type="button" value="submit"> <input id="clear" type="reset" value="clear"> </div> <div id="pass_res"></div> </form> </body> </html>

coothead

Thanks :)

No problem, you're very welcome. ;)

coothead