www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Adding Event Listeners to input elements dynamically

  1. #1
    Join Date
    Aug 2008
    Posts
    96

    resolved [RESOLVED] Adding Event Listeners to input elements dynamically

    Hi all,

    I am trying to add event listeners to form input elements.
    However, every time I run the script it simply fires the event automatically off the page load.

    I don't write JavaScript that often so any help that can be given is appreciated.
    Code:
    window.onload = myFunc;
    function myFunc(){
    	
    	//Look for a form element on the page
    	if(document.all)
    	{
    		//IE and Chrome
    		var ArrayOfForms = document.all.tags("form");
    	}
    	else
    	{
    		//FF
    		var ArrayOfForms = document.getElementsByTagName("body")[0].getElementsByTagName("form");
    	}
    	
    	var FormCount = ArrayOfForms.length;
    	for(var i=0; i < FormCount; i++)
    	{
    		var ArrayOfInputs = ArrayOfForms[i].getElementsByTagName("input");
    		var InputCount = ArrayOfInputs.length;
    		for(var z=0; z < InputCount; z++)
    		{	
    			//Foreach input within each form, create an "onchange" listener
    			if(ArrayOfInputs[z].type != "submit")
    			{
    				ArrayOfInputs[z].addEventListener('change', verifyInput(ArrayOfInputs[z].id), false);
    			}
    		}
    	}
    }
    
    function verifyInput(ElementId) {
    	var Element = document.getElementById(ElementId);
    	alert("You just changed the value of input named "+ Element.name);
    }

  2. #2
    Join Date
    Nov 2007
    Posts
    412
    You need to wrap your "verifyInput" as a function call.

    Try this:
    Code:
    <html>
    <head>
    </head>
    <body>
    <form name="myForm">
    <input type="text" name="one" id="one" value=""><br/>
    <input type="text" name="two" id="two" value=""><br/>
    <input type="text" name="three" id="three" value=""><br/>
    </form>
    <script>
    window.onload = myFunc();
    function myFunc(){
    	
    	//Look for a form element on the page
    	if(document.all)
    	{
    		//IE and Chrome
    		var ArrayOfForms = document.all.tags("form");
    	}
    	else
    	{
    		//FF
    		var ArrayOfForms = document.getElementsByTagName("body")[0].getElementsByTagName("form");
    	}
    	
    	var FormCount = ArrayOfForms.length;
    	for(var i=0; i < FormCount; i++)
    	{
    		var ArrayOfInputs = ArrayOfForms[i].getElementsByTagName("input");
    		var InputCount = ArrayOfInputs.length;
    		for(var z=0; z < InputCount; z++)
    		{	
    			//Foreach input within each form, create an "onchange" listener
    			if(ArrayOfInputs[z].type != "submit")
    			{
    				ArrayOfInputs[z].addEventListener('change', function(e){verifyInput(this.id)}, false);
    			}
    		}
    	}
    }
    
    function verifyInput(ElementId) {
    	var Element = document.getElementById(ElementId);
    	alert("You just changed the value of input named "+ Element.name);
    }
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Aug 2008
    Posts
    96
    tyvm I will try this.. does this have to do with the addEventListener expecting the handling object or something?
    I don't really know what I'm saying but I read something about a handling object that is supposed to have a handler function.
    However I have yet to come across any examples of such a thing.
    Last edited by efficacious; 06-12-2012 at 01:54 AM.

  4. #4
    Join Date
    Aug 2008
    Posts
    96
    yup, that worked great nap0leon thanks again

Thread Information

Users Browsing this Thread

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

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