www.webdeveloper.com
Results 1 to 6 of 6

Thread: document.forms.name is undefined

  1. #1
    Join Date
    Jan 2009
    Location
    127.0.0.1
    Posts
    126

    document.forms.name is undefined

    The error is the title 'TypeError: document.forms.sections_scopes_form is undefined' this one is more specific to my code. It is located in the function checkboxes_sections_scopes() as part of the if statement.

    If you want to copy and paste the code to see if for yourself you have to click a check box to get the program to throw the error.

    Below is enough of my source html and javascript to get the program to "work". I imagine that it is some kind of syntax error that I just can't see because I use the exact same DOM call in my function display_sections_scopes() where it works just fine.

    Code:
    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8" />
    
    	<style type="text/css">
    	#wrapper()
    	
    		#content()
    			
    			
    	</style>
    		
    	
    	
    </head>
    <body>
    	<div id="wrapper">
    		<div id="content">
    			
    			<!-- The checkboxes for the Section Numbers and Scope Titles will appear in this table. -->
    			<div id="sections_scopes-div">
    				<form name="sections_scopes_form" method="get" action="" id="sections_scopes_form" enctype="multipart/form-data">
    				</form>
    			</div>
    			
    		</div>
    	</div>
    	
    	<!--Loading in the database functionality of the taffydb. For a quick tutorial http://www.taffydb.com/-->
    	<script type="text/javascript" src="taffy.js">
    	</script>
    	
    	<script type="text/javascript" language="javascript">
    		
    		/* This is the JavaScript database format. */
    		var sections_scopes = TAFFY([{"id":0, section:"05 53 00", scope:"Metal Gratings", in1:"mg-inclusion 1", in2:"mg-inclusion 2", in3:"mg-inclusion 3", in4:"mg-inclusion 4", ex1:"mg-exclusion 1", ex2:"mg-exclusion 2", ex3:"mg-exclusion 3", ex4:"mg-exclusion 4"}, {"id":1, section:"05 73 00", scope:"Decorative Metal Railings", in1:"dmr-inclusion 1", in2:"dmr-inclusion 2", in3:"dmr-inclusion 3", in4:"dmr-inclusion 4", ex1:"dmr-exclusion 1", ex2:"dmr-exclusion 2", ex3:"dmr-exclusion 3", ex4:"dmr-exclusion 4"}, {"id":2, section:"07 21 00", scope:"Thermal Insulation", in1:"ti-inclusion 1", in2:"ti-inclusion 2", in3:"ti-inclusion 3", in4:"ti-inclusion 4", ex1:"ti-exclusion 1", ex2:"ti-exclusion 2", ex3:"ti-exclusion 3", ex4:"ti-exclusion 4" }, {"id":3, section:"07 84 13", scope:"Penetration Firestopping", in1:"pf-inclusion 1", in2:"pf-inclusion 2", in3:"pf-inclusion 3", in4:"pf-inclusion 4", ex1:"pf-exclusion 1", ex2:"pf-exclusion 2", ex3:"pf-exclusion 3", ex4:"pf-exclusion 4"}]);
    
    		/*setting variables for while loops to iterate over the database*/
    		//x is used for looping through sections and scopes
    		var x = 0;
    		//y is used for looping through inclusions
    		var y = 0;
    		//z is used for looping through exclusions
    		var z = 0;
    		var num_sections = sections_scopes().max("id");
    		
    		/*Displays each Section Number and the Scope Title in succession beside a checkbox. The user can select each checkbox to be displayed with choices for inclusions and exclusions under each Section Number and Scope Title.*/
    		
    		function display_sections_scopes()
    			{
    				var x = 0;
    				while(x <= num_sections)
    				{
    					var section = sections_scopes({"id":x}).select("section");
    					var scope = sections_scopes({"id":x}).select("scope");
    					var text = " " + section + " " + scope + "\n";
    					
    					var input = document.createElement("input");
    					input.setAttribute("type", "checkbox");
    					input.setAttribute("name", section);
    					input.setAttribute("onclick", "checkboxes_sections_scopes()");
    					var form = document.forms['sections_scopes_form'];
    					form.appendChild(input);
    					
    					var label = document.createElement("label");
    					label.setAttribute("for", section);
    					form.appendChild(document.createTextNode(text));
    					
    					x++;
    				}
    			};
    
    		//Retrieving the number of inclusions per section/scope
    		function get_num_inclusions(input_id)
    			{
    				var count_in = 0;
    				var y = 0;
    				section = input_id;
    				document.write(section);
    				while(y)
    					{
    						var inclusion = "in" + y;
    						document.write("Inclusions: " + inclusion);
    						sections_scopes({section:"section"}).get(inclusion);
    						y++;
    						count_in++;
    					}
    				return count_in;
    			}
    		
    		//Retrieving the number of exclusions per section/scope
    		function get_num_exclusions(input_id)
    			{
    				var count_ex = 0;
    				var z = 0;
    				section = input_id;
    				document.write(section);
    				while(z != -1)
    					{
    						var exclusion = "ex" + z;
    						sections_scopes({section:"section"}).get(exclusion);
    						z++;
    						count_ex++;
    					}
    				return count_ex;
    			}
    
    		/*Displays a list of the inclusions and exclusions of each Section Number/Scope Title if the Section Number/Scope Title checkbox is selected. Each inclusion or exclusion is accompanied by a check box. This check box is to include or exclude the selection(inclusion or exclusion) from the final document.
    		*/
    
    		//Showing or hiding the inclusions and exclusions based on the status of the section/scope checkbox
    		function checkboxes_sections_scopes()
    			{
    			var x = 0;
    				while(x <= num_sections)
    					{
    						var input_id = sections_scopes({"id":x}).select("section");
    						document.write("Input ID:" + input_id);
    						
    						if(document.forms.sections_scopes_form.input_id.checked == true)
    							{
    								document.write("display inclusions");
    								display_inclusions_exclusions(input_id);
    							}
    						else
    							{
    								document.write("hide inclusions");
    								hide_inclusions_exclusions(input_id);
    							}
    					}
    			};
    
    		//Retrieving the correct inclusions and excluions to display with their respective section/scope
    		function display_inclusions_exclusions(input_id)
    			{
    				document.write("\nInput ID: " + input_id);
    				var x = 0;
    				var y = 0;
    				var z = 0;
    				while(x <= num_sections)
    				{
    					var section = sections_scopes({"id":x}).select("section");
    					if(input_id == section)
    					{
    						num_inclusions = get_num_inclusions(input_id);
    						num_exclusions = get_num_exclusions(input_id);
    						
    						while(y <= num_inclusions)
    						{
    							//print in table below respective section and scope with a heading of "Inclusions"
    							var inclusion = "in" + y;
    							document.write(inclusion)
    							document.write(sections_scopes({section:"section"}).select(inclusion));
    							y++;
    						}
    						while(z <= num_exclusions)
    						{
    							//print in table below respective section and scope with a heading of "Exclusions"
    							var exclusion = "ex" + z;
    							document.write(sections_scopes({section:"section"}).select(exclusion));
    							z++;
    						}
    					}
    				}
    			};
    
    		function hide_inclusions_exclusions(input_id)
    			{};
    	
    	
    	document.onload = display_sections_scopes();
    	</script>
    </body>
    </html>
    Thanks for the help in advance. If you have any questions or need some clarification please let me know.
    Last edited by spotted zebra; 08-01-2012 at 12:48 PM. Reason: clarifications

  2. #2
    Join Date
    Nov 2007
    Posts
    431
    Looks like you have the correct syntax in line 63
    "document.forms['sections_scopes_form']"

    I created a testpage with your code to verify the error.
    I downloaded taffy.js to my local machine to remove the "TAFFY undeclared" error.
    Verified the error that happens when you click a checkbox.
    Copied "document.forms['sections_scopes_form']" from line 63 and placed it into line 121.
    Refreshed the page.
    Verified no errors when clicking a checkbox.

  3. #3
    Join Date
    Jan 2009
    Location
    127.0.0.1
    Posts
    126
    I just tried what you suggest to the letter but I am still getting an error on line 121 even after copying the code "document.forms['sections_scopes_form']" from line 63 and replacing the code on 121.

    can you post the code you have so I can have a look at it?

    EDIT:

    Never mind I got mine to work. I am somewhat new to modifying the DOM with javascript variable and I didn't know you couldn't use javascript in your DOM object. I found a work around though and it is posted below for anyone following after that needs a fix.

    Code:
    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8" />
    	
    	
    	
    	<style type="text/css">
    	#wrapper()
    	
    		#content()
    			#logo{text-align: center;}
    			#date{text-align: left;}
    			
    			
    	</style>
    		
    	
    	
    </head>
    <body>
    	<div id="wrapper">
    		<div id="content">
    			
    			
    			<!-- The checkboxes for the Section Numbers and Scope Titles will appear in this table. -->
    				<form name="awesome" method="get" action="" enctype="multipart/form-data">
    				</form>
    			
    			
    			
    		</div>
    	</div>
    	
    	<!--Loading in the database functionality of the taffydb. For a quick tutorial http://www.taffydb.com/-->
    	<script type="text/javascript" src="taffy.js">
    	</script>
    	
    	<script type="text/javascript" language="javascript">
    		
    		/* This is the JavaScript database format. */
    		var sections_scopes = TAFFY([{"id":0, section:"055300", scope:"Metal Gratings", in1:"mg-inclusion 1", in2:"mg-inclusion 2", in3:"mg-inclusion 3", in4:"mg-inclusion 4", ex1:"mg-exclusion 1", ex2:"mg-exclusion 2", ex3:"mg-exclusion 3", ex4:"mg-exclusion 4"}, {"id":1, section:"057300", scope:"Decorative Metal Railings", in1:"dmr-inclusion 1", in2:"dmr-inclusion 2", in3:"dmr-inclusion 3", in4:"dmr-inclusion 4", ex1:"dmr-exclusion 1", ex2:"dmr-exclusion 2", ex3:"dmr-exclusion 3", ex4:"dmr-exclusion 4"}, {"id":2, section:"072100", scope:"Thermal Insulation", in1:"ti-inclusion 1", in2:"ti-inclusion 2", in3:"ti-inclusion 3", in4:"ti-inclusion 4", ex1:"ti-exclusion 1", ex2:"ti-exclusion 2", ex3:"ti-exclusion 3", ex4:"ti-exclusion 4" }, {"id":3, section:"078413", scope:"Penetration Firestopping", in1:"pf-inclusion 1", in2:"pf-inclusion 2", in3:"pf-inclusion 3", in4:"pf-inclusion 4", ex1:"pf-exclusion 1", ex2:"pf-exclusion 2", ex3:"pf-exclusion 3", ex4:"pf-exclusion 4"}]);
    
    		/*setting variables for while loops to iterate over the database*/
    		//x is used for looping through sections and scopes
    		var x = 0;
    		//y is used for looping through inclusions
    		var y = 0;
    		//z is used for looping through exclusions
    		var z = 0;
    		var num_sections = sections_scopes().max("id");
    		
    		/*Displays each Section Number and the Scope Title in succession beside a checkbox. The user can select each checkbox to be displayed with choices for inclusions and exclusions under each Section Number and Scope Title.*/
    		
    		function display_sections_scopes()
    			{
    				var x = 0;
    				while(x <= num_sections)
    				{
    					var section = sections_scopes({"id":x}).select("section");
    					var scope = sections_scopes({"id":x}).select("scope");
    					var text = " " + section + " " + scope + "\n";
    					
    					var input = document.createElement("input");
    					input.setAttribute("type", "checkbox");
    					input.setAttribute("name", section);
    					input.setAttribute("onclick", "checkboxes_sections_scopes()");
    					var form = document.forms[0];
    					form.appendChild(input);
    					
    					var label = document.createElement("label");
    					label.setAttribute("for", section);
    					form.appendChild(document.createTextNode(text));
    					
    					x++;
    				}
    			};
    
    		//Retrieving the number of inclusions per section/scope
    		function get_num_inclusions(input_id)
    			{
    				var count_in = 0;
    				var y = 0;
    				section = input_id;
    				document.write("<br />Section, get num inclusions: " + section);
    				while(y)
    					{
    						var inclusion = "in" + y;
    						document.write("Inclusions: " + inclusion);
    						sections_scopes({section:"section"}).get(inclusion);
    						y++;
    						count_in++;
    					}
    				return count_in;
    			}
    		
    		//Retrieving the number of exclusions per section/scope
    		function get_num_exclusions(input_id)
    			{
    				var count_ex = 0;
    				var z = 0;
    				section = input_id;
    				document.write(section);
    				while(z != -1)
    					{
    						var exclusion = "ex" + z;
    						sections_scopes({section:"section"}).get(exclusion);
    						z++;
    						count_ex++;
    					}
    				return count_ex;
    			}
    
    		/*Displays a list of the inclusions and exclusions of each Section Number/Scope Title if the Section Number/Scope Title checkbox is selected. Each inclusion or exclusion is accompanied by a check box. This check box is to include or exclude the selection(inclusion or exclusion) from the final document.
    		*/
    
    		//Showing or hiding the inclusions and exclusions based on the status of the section/scope checkbox
    		
    
    		function checkboxes_sections_scopes()
    			{
    					var x = 0;
    					var form = document.forms[0];
    						while(x <= num_sections)
    							{
    								var input_id = sections_scopes({"id":x}).select("section");
    								document.write("Input ID, checkboxes: " + input_id + "<br />");
    								document.write("<br />" + form.input_id);
    								
    								//THIS IS THE FIX. move the variable 'form' outside the loop (not sure why exactly although it does make sense not to make that call every time loop increments) and then put input_id which is my javascript variable inside brackets. 
    								if(form[input_id].checked == true)
    									{
    										document.write("<br /> display inclusions");
    										display_inclusions_exclusions(input_id);
    									}
    								else
    									{
    										document.write("hide inclusions");
    										hide_inclusions_exclusions(input_id);
    									}
    							}
    			};
    
    		//Retrieving the correct inclusions and excluions to display with their respective section/scope
    		function display_inclusions_exclusions(input_id)
    			{
    				document.write("<br /> display function Input ID: " + input_id);
    				var x = 0;
    				var y = 0;
    				var z = 0;
    				while(x <= num_sections)
    				{
    					var section = sections_scopes({"id":x}).select("section");
    					if(input_id == section)
    					{
    						num_inclusions = get_num_inclusions(input_id);
    						num_exclusions = get_num_exclusions(input_id);
    						
    						while(y <= num_inclusions)
    						{
    							//print in table below respective section and scope with a heading of "Inclusions"
    							var inclusion = "in" + y;
    							document.write(inclusion)
    							document.write(sections_scopes({section:"section"}).select(inclusion));
    							y++;
    						}
    						while(z <= num_exclusions)
    						{
    							//print in table below respective section and scope with a heading of "Exclusions"
    							var exclusion = "ex" + z;
    							document.write(sections_scopes({section:"section"}).select(exclusion));
    							z++;
    						}
    					}
    				}
    			};
    
    		function hide_inclusions_exclusions(input_id)
    			{};
    	
    	
    	document.onload = display_sections_scopes();
    	</script>
    </body>
    </html>
    Last edited by spotted zebra; 08-01-2012 at 03:10 PM. Reason: forgot a word

  4. #4
    Join Date
    Nov 2007
    Posts
    431
    Here's the page that I did that fixed the first error. Not sure what it's supposed to be doing once I click a checkbox, but at least the first error went away.

    Not sure what you mean by "you cannot use javascript in your DOM object". I use javascript all the time to manipulate the DOM to control what and how stuff appears on the page.
    Code:
    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8" />
    
    	<style type="text/css">
    	#wrapper()
    	
    		#content()
    			
    			
    	</style>
    		
    	
    	
    </head>
    <body>
    	<div id="wrapper">
    		<div id="content">
    			
    			<!-- The checkboxes for the Section Numbers and Scope Titles will appear in this table. -->
    			<div id="sections_scopes-div">
    				<form name="sections_scopes_form" method="get" action="" id="sections_scopes_form" enctype="multipart/form-data">
    				</form>
    			</div>
    			
    		</div>
    	</div>
    	
    	<!--Loading in the database functionality of the taffydb. For a quick tutorial http://www.taffydb.com/-->
    	<script type="text/javascript" src="taffy.js">
    	</script>
    	
    	<script type="text/javascript" language="javascript">
    		
    		/* This is the JavaScript database format. */
    		var sections_scopes = TAFFY([{"id":0, section:"05 53 00", scope:"Metal Gratings", in1:"mg-inclusion 1", in2:"mg-inclusion 2", in3:"mg-inclusion 3", in4:"mg-inclusion 4", ex1:"mg-exclusion 1", ex2:"mg-exclusion 2", ex3:"mg-exclusion 3", ex4:"mg-exclusion 4"}, {"id":1, section:"05 73 00", scope:"Decorative Metal Railings", in1:"dmr-inclusion 1", in2:"dmr-inclusion 2", in3:"dmr-inclusion 3", in4:"dmr-inclusion 4", ex1:"dmr-exclusion 1", ex2:"dmr-exclusion 2", ex3:"dmr-exclusion 3", ex4:"dmr-exclusion 4"}, {"id":2, section:"07 21 00", scope:"Thermal Insulation", in1:"ti-inclusion 1", in2:"ti-inclusion 2", in3:"ti-inclusion 3", in4:"ti-inclusion 4", ex1:"ti-exclusion 1", ex2:"ti-exclusion 2", ex3:"ti-exclusion 3", ex4:"ti-exclusion 4" }, {"id":3, section:"07 84 13", scope:"Penetration Firestopping", in1:"pf-inclusion 1", in2:"pf-inclusion 2", in3:"pf-inclusion 3", in4:"pf-inclusion 4", ex1:"pf-exclusion 1", ex2:"pf-exclusion 2", ex3:"pf-exclusion 3", ex4:"pf-exclusion 4"}]);
    
    		/*setting variables for while loops to iterate over the database*/
    		//x is used for looping through sections and scopes
    		var x = 0;
    		//y is used for looping through inclusions
    		var y = 0;
    		//z is used for looping through exclusions
    		var z = 0;
    		var num_sections = sections_scopes().max("id");
    		
    		/*Displays each Section Number and the Scope Title in succession beside a checkbox. The user can select each checkbox to be displayed with choices for inclusions and exclusions under each Section Number and Scope Title.*/
    		
    		function display_sections_scopes()
    			{
    				var x = 0;
    				while(x <= num_sections)
    				{
    					var section = sections_scopes({"id":x}).select("section");
    					var scope = sections_scopes({"id":x}).select("scope");
    					var text = " " + section + " " + scope + "\n";
    					
    					var input = document.createElement("input");
    					input.setAttribute("type", "checkbox");
    					input.setAttribute("name", section);
    					input.setAttribute("onclick", "checkboxes_sections_scopes()");
    					var form = document.forms['sections_scopes_form'];
    					form.appendChild(input);
    					
    					var label = document.createElement("label");
    					label.setAttribute("for", section);
    					form.appendChild(document.createTextNode(text));
    					
    					x++;
    				}
    			};
    
    		//Retrieving the number of inclusions per section/scope
    		function get_num_inclusions(input_id)
    			{
    				var count_in = 0;
    				var y = 0;
    				section = input_id;
    				document.write(section);
    				while(y)
    					{
    						var inclusion = "in" + y;
    						document.write("Inclusions: " + inclusion);
    						sections_scopes({section:"section"}).get(inclusion);
    						y++;
    						count_in++;
    					}
    				return count_in;
    			}
    		
    		//Retrieving the number of exclusions per section/scope
    		function get_num_exclusions(input_id)
    			{
    				var count_ex = 0;
    				var z = 0;
    				section = input_id;
    				document.write(section);
    				while(z != -1)
    					{
    						var exclusion = "ex" + z;
    						sections_scopes({section:"section"}).get(exclusion);
    						z++;
    						count_ex++;
    					}
    				return count_ex;
    			}
    
    		/*Displays a list of the inclusions and exclusions of each Section Number/Scope Title if the Section Number/Scope Title checkbox is selected. Each inclusion or exclusion is accompanied by a check box. This check box is to include or exclude the selection(inclusion or exclusion) from the final document.
    		*/
    
    		//Showing or hiding the inclusions and exclusions based on the status of the section/scope checkbox
    		function checkboxes_sections_scopes()
    			{
    			var x = 0;
    				while(x <= num_sections)
    					{
    						var input_id = sections_scopes({"id":x}).select("section");
    						document.write("Input ID:" + input_id);
    						
    						if(document.forms['sections_scopes_form'].input_id.checked == true)
    							{
    								document.write("display inclusions");
    								display_inclusions_exclusions(input_id);
    							}
    						else
    							{
    								document.write("hide inclusions");
    								hide_inclusions_exclusions(input_id);
    							}
    					}
    			};
    
    		//Retrieving the correct inclusions and excluions to display with their respective section/scope
    		function display_inclusions_exclusions(input_id)
    			{
    				document.write("\nInput ID: " + input_id);
    				var x = 0;
    				var y = 0;
    				var z = 0;
    				while(x <= num_sections)
    				{
    					var section = sections_scopes({"id":x}).select("section");
    					if(input_id == section)
    					{
    						num_inclusions = get_num_inclusions(input_id);
    						num_exclusions = get_num_exclusions(input_id);
    						
    						while(y <= num_inclusions)
    						{
    							//print in table below respective section and scope with a heading of "Inclusions"
    							var inclusion = "in" + y;
    							document.write(inclusion)
    							document.write(sections_scopes({section:"section"}).select(inclusion));
    							y++;
    						}
    						while(z <= num_exclusions)
    						{
    							//print in table below respective section and scope with a heading of "Exclusions"
    							var exclusion = "ex" + z;
    							document.write(sections_scopes({section:"section"}).select(exclusion));
    							z++;
    						}
    					}
    				}
    			};
    
    		function hide_inclusions_exclusions(input_id)
    			{};
    	
    	
    	document.onload = display_sections_scopes();
    	</script>
    </body>
    </html>

  5. #5
    Join Date
    Jun 2012
    Posts
    10
    If you only have one form in your webpage, you could try this:

    find this line of code:
    document.forms.name

    and replaced with:
    document.forms[0].name

  6. #6
    Join Date
    Jan 2009
    Location
    127.0.0.1
    Posts
    126
    What I meant was you can't have javascript variables in your DOM object. That is obviously not strictly speaking there are ways to work around it as I have shown above but by definition you aren't supposed to be able to do it, mainly because it is an object.

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