Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Javascript on Xhtml form

    Hi guys

    I am trying to make my first xhtml form using javascript but am having some problems. I have 4 text boxes on the form and two buttons:

    Car

    Year

    Password

    Re-enter Password

    *Buttons*

    Reset and Submit query

    I want an alert to pop up when the submit button is pressed if any of the fields are not filled in. I have written the javascript for the events but for some reason it is not picking up the car or year fields. When the submit button is pressed it only prompts for a password (if not filled in). I have looked over the code but I cant see where i'm going wrong. I have added the xhtml code with the external javascript pages at the bottom.

    Any help would be much appreciated.
    Fatbot

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!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>
    
    <title>Test</title>
    
    	
    	<!--Scripts for submit button event handlers-->
    	<script type="text/javascript" src="submit_car.js"></script>
    	<script type="text/javascript" src="submit_year.js"></script>
    	<script type="text/javascript" src="submit_pass.js"></script>
    	
    	
    </head>
    
    <body>
    	
    	
    	<form id="myForm" action="">
    	
    	<p>
    	
    
    	<!--Input car name-->
    
    		<label>Car<br />
    		
    			<input type="text" id="car" size="30" />
    		
    		</label>
    		
    		<br />
    		<br />
    		
    		<!--Register car name event handlers-->
    		<script type="text/javascript" src="car_check.js"></script>
    
    	<!--Input year-->	
    		
    		<label>Year<br />
    		
    			<input type="text" id="year" size="4" />
    			
    		</label>
    
    		<br />
    		<br />
    		
    		<!--Register year event handlers-->
    		<script type="text/javascript" src="year_check.js"></script>
    		
    				
    	<!-- Password entry and re-entry -->	
    				
    		<label>Password<br />
    			
    			<input type="password" id="first" size="10" />
    			
    		</label>
    		
    		<br />		
    		<br />	
    		
    		<label>Re-enter Password<br /> 
    			
    			<input type="password" id="second" size="10" />
    			
    		</label>
    
    		<br />
    		<br />
    	
    		<!--Register password event handlers-->
    		<script type="text/javascript" src="password_check.js"></script>	
    	
    	
    	<input type="reset" name="reset" />
    	<input type="submit" name="submit" />
    			
    	
    	</p>
    				
    	</form>	
    		
    		
    	</body>
    
    </html>
    
    
    //submit_car.js
    //Event handler function for entering car name
    
    function carCheck() {
    			var car = document.getElementById("car");
    			
    			if (car.value== "") {
    			alert ("Please enter a car name");
    			
    			return false;
    			} else 
    			  return true;
    			}  
    
    
    
    //car_check.js
    //Registers the event handlers for submit_car.js
    
    
    document.getElementById("car").onsubmit = carCheck;
    document.getElementById("myForm").onsubmit = carCheck;
    
    
    
    //submit_year.js
    //Event handler function for entering year
    
    function yearCheck() {
    			var year = document.getElementById("year");
    			
    			if (year.value== "") {
    			alert ("Please enter a year");
    			
    			return false;
    			} else 
    			  return true;
    			}  
    
    
    
    //year_check.js
    //Registers the event handlers for submit_year.js
    
    
    document.getElementById("year").onsubmit = yearCheck;
    document.getElementById("myForm").onsubmit = yearCheck;
    
    
    
    //Submit_pass.js
    //Event handler function for ensuring password entry is correct
    
    function passwordCheck() {
    	var first = document.getElementById("first");
    	var second = document.getElementById("second");
    	
    	if (first.value== "") {
    		alert ("Please enter a password");
    		
    		return false;
    		}
    	
    	if (first.value !== second.value) {
    		alert ("The two passwords you entered did not match. \n" +
    		"Please ensure both passwords are identical.");
    		
    		return false;
    		} else
    		  return true;
    		  
    		}	
    
    
    
    //password_check.js
    //Registers the event handlers for submit_pass.js
    
    
    document.getElementById("second").onblur = passwordCheck;
    document.getElementById("myForm").onsubmit = passwordCheck;

  • #2
    Regular Coder
    Join Date
    Jul 2003
    Posts
    117
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Only the form has onsubmit event. So document.getElementById("year").onsubmit will not be called.
    You have to put all the validations together into one function and then handle it in the form's on submit
    like this:
    Code:
    function validateAll()
    {
        if(false == carCheck()||
           false == yearCheck() ||
           false == passwordCheck())
        {
          return false; 
        }
        return true;
    }
    and then
    Code:
    document.getElementById("myForm").onsubmit = validateAll;
    For easier validations, try JavaScript Form Validation script.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou for your help, much appreciated.


  •  

    Posting Permissions

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