[RESOLVED] Problem with getElementByID

**amir786_z** · 12-15-2012 01:32 PM

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>

**wbport** · 12-16-2012 11:31 AM

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.

**coothead** · 12-16-2012 11:44 AM

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

**amir786_z** · 12-17-2012 02:00 AM

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?

**coothead** · 12-17-2012 04:55 AM

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

**amir786_z** · 12-19-2012 12:20 AM

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

**coothead** · 12-19-2012 01:39 AM

No problem, you're very welcome.

coothead

Thread: [RESOLVED] Problem with getElementByID

Thread Tools

Display

[RESOLVED] Problem with getElementByID

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions