[RESOLVED] Adding Event Listeners to input elements dynamically

**efficacious** · 06-11-2012 07:38 AM

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);
}

**nap0leon** · 06-11-2012 08:46 AM

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>

**efficacious** · 06-12-2012 01:50 AM

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.

**efficacious** · 06-12-2012 03:15 AM

yup, that worked great nap0leon thanks again

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

Thread Tools

Display

[RESOLVED] Adding Event Listeners to input elements dynamically

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions