www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Problem with getElementByID

  1. #1
    Join Date
    Dec 2012
    Posts
    20

    resolved [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>

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    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.

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    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

  4. #4
    Join Date
    Dec 2012
    Posts
    20
    Quote Originally Posted by coothead View Post
    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?

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    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

  6. #6
    Join Date
    Dec 2012
    Posts
    20
    Quote Originally Posted by coothead View Post
    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

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467

    No problem, you're very welcome.


    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles