Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts

    adding form elements to an array

    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>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,990
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • Users who have thanked xelawho for this post:

    chrisfozz (01-09-2012)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,990
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •