adding form elements to an array

chrisfozz · 01-06-2012, 05:27 PM

This works, to a degree.
“Click Here” and the page dynamically adds a text box with the default value 100.
Users can the manually change the value if they wish.
My problem is with the getArray function, at present it works only when 3 text boxes are added; 1 or 2 produces no result and more than 3 only gives a result for the first three. I need to add the content of each text box to the tpArray whatever the number.
I’ve tried various ways to loop through this with no success; any help would be greatly appreciated.

Code:

<html>
<head>
<script type = "text/javascript">
var myVar = 0;
var num
function addElement() {
	var ni = document.getElementById('myDiv');
	var numi = document.getElementById('theValue');
	num = (document.getElementById('theValue').value -1)+ 2;
	numi.value = num;
	var newdiv = document.createElement('div');
	var divIdName = 'my'+num+'Div';
	newdiv.setAttribute('id',divIdName);
	newdiv.innerHTML = "Label "+myVar+" <input type='text' size = '10' name='txtbox"+num+"' onblur = 'capture(this)' value = '"+100+"' />"
	ni.appendChild(newdiv);
	myVar ++;	
}
var tpArray=new Array();
function getArray(){		
	tpArray = [document.form1.txtbox1.value, document.form1.txtbox2.value, document.form1.txtbox3.value];
}
function printArray(){	
	for(var i=0;i<tpArray.length;i++){
		document.write("tpArray["+i+"] is "+tpArray[i]+"<br>");
	} 
}
</script>
</head>
<body>
<form name="form1" action="" method="get">
<input type="hidden" value="0" id="theValue" />
<div id="myDiv"> </div>
</form>
<div id = 'clicker' onClick="addElement()"><h1>click here to add an element</h1></div>
<button type="button" onclick="getArray()">getArray fuction</button>
<button type="button" onclick="printArray()">printArray function</button>
</body>
</html>

xelawho · 01-06-2012, 06:02 PM

I added a class name to your inputs to make them easier to find and rewrote your element-creation routine to make it a bit more DOM-friendly. hope you don't mind...

Code:

<html>
<head>
<script type = "text/javascript">
var myVar = 0;
var num;
function addElement() {
	var ni = document.getElementById('myDiv');
	var numi = document.getElementById('theValue');
	num = (document.getElementById('theValue').value -1)+ 2;
	numi.value = num;
	var newdiv = document.createElement('div');
	var divIdName = 'my'+num+'Div';
	newdiv.setAttribute('id',divIdName);
	newdiv.innerHTML = "Label "+myVar+" "; 
	ni.appendChild(newdiv);
	var inp = document.createElement('input');
	inp.type='text' 
	inp.size = '10' 
	inp.className='capt' 
	inp.name='txtbox'+num; 
	inp.onblur = 'capture(this)' 
	inp.value = "100";
	newdiv.appendChild(inp);
	myVar ++;	
}
var tpArray=new Array();
function getArray(){
els=document.getElementsByTagName("input")
	for(var i=0;i<els.length;i++){	
	if (els[i].className=="capt")
	tpArray.push(els[i].value)
		}
}
	
function printArray(){	
	for(var i=0;i<tpArray.length;i++){
		document.write("tpArray["+i+"] is "+tpArray[i]+"<br>");
	} 
}
</script>
</head>
<body>
<form name="form1" action="" method="get">
<input type="hidden" value="0" id="theValue" />
<div id="myDiv"> </div>
</form>
<div id = 'clicker' onClick="addElement()"><h1>click here to add an element</h1></div>
<button type="button" onclick="getArray()">getArray fuction</button>
<button type="button" onclick="printArray()">printArray function</button>
</body>
</html>

chrisfozz · 01-09-2012, 06:40 PM

Hi
Thank you very much for your help with this, your solution worked perfectly and has helped me to learn more about JavaScript, although, obviously I still have much to learn. I have made some changes which I hope have followed your example.
Moving on…
I’ve added another textbox which now gets the mouse coordinates onclick, as well as adding the default value of 100 to the second box.
My current problem is again around the addElement function; I would like to make the coordinate box read-only but leave the box with the default value editable by the user, can you point me in the right direction to do this?

Code:

<html>
<head>
<script type = "text/javascript">
var myVar = 0;
var coords=""
var coords2
document.onclick = master;
function master(e){
	getMouseXY(e);
	addElement();
}
var IE = document.all?true:false;
if (!IE) {
	document.captureEvents(Event.MOUSEMOVE)
}
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
	if (IE) { // grab the x-y pos.s if browser is IE
	tempX = event.clientX + document.body.scrollLeft;
	tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
	tempX = e.pageX;
	tempY = e.pageY;
}  
if (tempX < 0){
	tempX = 0;
}
if (tempY < 0){
	tempY = 0;
} 
var coords ="X- "+tempX +" Y- "+ tempY;
document.form1.coords.value = coords;
coords2 = document.form1.coords.value;
return true;
}
function addElement() {
	var ni = document.getElementById('myDiv');
	var numi = document.getElementById('theValue');
	var num = (document.getElementById('theValue').value -1);
	numi.value = num;
	var newdiv = document.createElement('div');
	var divIdName = 'my'+num+'Div';
	newdiv.setAttribute('id',divIdName);
	newdiv.innerHTML = "tp"+myVar+" ";//<input type='text' size = '60' name='poll_option"+num+"' onblur = 'capture(this)' value = '"+coords2+"' />"
	ni.appendChild(newdiv);
	var inp = document.createElement('input');
	var inp2 = document.createElement('input');
	inp.type='text' 
	inp.size = '3' 
	inp.className='capt' 
	inp.name='txtbox'+num;
	inp.onblur = 'capture(this)' 
	inp.value = 100
	inp2.type='text' 
	inp2.size = '14' 
	inp2.name='tpRad"+num+"' 
	inp2.value = coords2;
	newdiv.appendChild(inp2);		
	newdiv.appendChild(inp);
	myVar ++;	
}
</script>
</head>
<body>
<form name="form1">
<input type="hidden" id="theValue" name="coords" value="" size="12">
<div id="myDiv"> </div>
</form>
</body>
</html>

xelawho · 01-10-2012, 04:31 AM

if I understand you correctly, you're looking for inp.readOnly='true'

(generally speaking, attributes that are hyphenated inline: background-color, read-only - go camelCase when used in DOM methods: backgroundColor, readOnly, etc)