array of <input> ? 1

[Nefarta]

Hi guys,

Is it possible to create an array of elements, more precisely an array of <input> ?

Thanx

 

[theniteowl]

Yes, use something like this.
arrInput = document.getElementsByTagName('input');

Then you would setup a loop to go through the array and you can test what type of input field it is using the type property so you know how to handle it.

if (arrInput[x].type == 'text')
dosomething....




Paranoid? ME?? Who wants to know????

 

[adam0101]

Nefarta,
Are you talking about getting an array of references to existing inputs or do you want to dynamically create a series of inputs?


Adam

http://adameslinger.blogspot.com/

 

[Nefarta]

Dynamic creation of array of <input> would be great. I already know many of their properties (position, value, etc.). How would you create such an array, and how would you reference them?

Thanx

 

[theniteowl]

You will need to look into DOM methods for creating form elements. It's fairly straightforward but it will involve a lot of code you may not be familiar with.
Search for DOM Dynamic content.

Look at this link for a tutorial.

http://developer.apple.com/internet/webcontent/dom2i.html

Paranoid? ME?? Who wants to know????

 

[BillyRayPreachersSon]

Nefarta,

If you want to create a JavaScript array, with each element in the array being an input element, then that is no problem.

You need to tell us whether you also want those inputs on the page, or whether you simply want to have then in an array, but not on the page.

Or... maybe you already have your inputs on the page, but simply want to have pointers/references to all of them stored in an array.

Can you be a bit more specific about your requirements? As you can see, I've already presented 3 scenarios that fit what you've asked for - and there could be more... so you'll need to give us exact details before more exact help can be given.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Nefarta]

Hey Dan,

I need to create a two-dimension array of <div>, each <div> containing an <input> that will allow the user to enter some text (actually some time value formatted like '0930'). The actual number of <div> required changes according to the user but is known when I want to create them.

My HTML code already creates one such <div>, and I know how to change its properties through the style object:

...
<div id="TimeEditDiv">
<input id="TimeEditInput" type="text" maxlength="4" value="____">
</div>
...

where TimeEditDiv and TimeEditInput are defined in a style sheet.

Can you give me an example of a loop creating an array of such <div> using document.createElement("div") and also how to name them so that I can reference them and change some properties and retrieve the user input in each of them?

Thanx

 

[BillyRayPreachersSon]

If you want a one-dimensional array (0..n-1), you would use:

function createInputs(howMany) {
	var myArray = [];
	var container = document.getElementById('inputContainer');
	
	for (var loop=0; loop<howMany; loop++) {
		var newDiv = document.createElement('div');
		div.className = 'TimeEditDiv';

		var newInput = document.createElement('input');
		newInput.type = 'text';
		newInput.id = 'TimeEditInput_' + loop; // Make ID unique
		newInput.maxLength = 4;
		newInput.value = '____';

		newDiv.appendChild(newInput);
		container.appendChild(newDiv);
		myArray[loop] = newDiv;
	}
}

All you need to ensure is that you have a container on the page to put the divs in:

<div id="inputContainer"></div>

Note: IDs MUST be unique, so I've changed the IDs on the DIV elements to classes (you'll need to update your CSS), and made the IDs of the inputs unique by appending data to them.

So - after running the createInputs function, you will have returned to you a one-dimensional array containing pointers to the DIV elements (the ones that contain the inputs).

For a two-dimensional array [0..x-1 * 0..y-1], you would use this code instead:

function createInputs(howManyX, howManyY) {
	var myArray = [];
	var container = document.getElementById('inputContainer');
	
	for (var loopX=0; loopX<howManyX; loopX++) {
		myArray[loopX] = [];
		for (var loopY=0; loopY<howManyY; loopY++) {
			var newDiv = document.createElement('div');
			div.className = 'TimeEditDiv';

			var newInput = document.createElement('input');
			newInput.type = 'text';
			newInput.id = 'TimeEditInput_' + loopX + '_' + loopY; // Make ID unique
			newInput.maxLength = 4;
			newInput.value = '____';

			newDiv.appendChild(newInput);
			container.appendChild(newDiv);
			myArray[loopX][loopY] = newDiv;
		}
	}
	return(myArray);
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Nefarta]

Thanks Dan. Very helpful. I'll give it a try!

Nefarta

 

[Nefarta]

It works!

The CreateInputs() function works fine! The array of <div> is created and each one is the parent of an <input>. I can set the properties of both elements, parent and child, WITHIN the function.

I can also access/modify the properties of the (parent) <div> objects OUTSIDE the function (using for example myArray[0][0].style.top); but how do I access/modify the properties of the (child of <div>) <input> elements OUTSIDE the function?

I've tried the following, but no luck;
...
var temp = myArray[0][0].newInput.style.value;
...
where newInput is the var name under which the <input> was created IN THE FUNCTION;

Any ideas?

Nefarta

 

[BillyRayPreachersSon]

You can only use the array syntax to access the DIV. If you want to access anything else, you have to resort to DOM methods:

var temp = myArray[0][0].getElementsByTagName('input')[0].value;

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Of course, having said that, there's nothing to stop you from modifying this line:

myArray[loopX][loopY] = newDiv;

to this:

myArray[loopX][loopY] = { div:newDiv, input:newInput };

and then referring to your array element with ".div" and ".input" properties to refer to the relevant element:

var temp = myArray[0][0].div;  // returns the div
var temp = myArray[0][0].input;  // returns the input

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Nefarta]

Things are moving along.

For some reason I could only access the value of an <input> using the first way suggested:
var temp = myArray[0][0].getElementsByTagName('input')[0].value;

The other way just would not work.

Now how do I attach an event, say 'onMouseOver' to each <input>?
I've tried doing through the embedded <style> sheet:
...
.TimeEditInput { border: solid; border-width: 0; margin: 0;
onMouseOver:"this.style.color='red'";
}
...
but no luck!

Can I do it inside the function that creates the array of <input>, something like:
...
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.id = 'TimeEditInput_' + loopX + '_' + loopY;
newInput.className = 'TimeEditInput';
onMouseOver = "color='red'";
...

Or can I do it outside the function, after the array has been created, using something like
...
var temp = myArray[0][0].?????????????????
...

Thanks

 

[BillyRayPreachersSon]

You would use:

newInput.onmouseover = function() {
   this.style.color = 'red';
}

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]