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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    58
    Thanks
    8
    Thanked 4 Times in 4 Posts

    For loop and array issues

    OK, I am trying to add input boxes to a site dynamically, without loosing their value. But when I do this, the code within the for loop fails, but it I make it alert the array values, it works. Also if I do not have the key for the array it works. It also works with with the key being 0, but no other number works. Can some one help me please?

    Here is the javascript code:
    Code:
    function addInput(){
    	var inputs = document.getElementsByName('inputs');
    	var inputDiv = document.getElementById('UserInput');
    	lengths = inputs.length
    	inputDiv.innerHTML = "<input type='text' name='inputs' value='"+inputs[0].value+"' />";
    	for(i=1;i<=lengths;i++){
    		inputDiv.innerHTML += '<br /><input type="text" name="inputs" value="'+inputs[i].value+'" />';
    	}
    	inputDiv.innerHTML += '<br /><input type="text" name="inputs" value="" />';
    	unset(length);
    	unset(i);
    	unset(inputs);
    	unset(inputDiv);
    }
    Here is the html code:
    Code:
    <form action='index.php?id=<? echo $next; ?>' method='POST' name='form'>
    	<div id='UserInput' name='UserInput' style='display: none;'>
    		<input type="text" name="inputs" value="" /><br />
    		<input type="text" name="inputs" value="" />
    	</div>
    Last edited by Rihoj; 05-29-2009 at 05:09 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Well, this is a really really bad way to do this, anyway.

    You should instead use createElement( ) and append the created element to the list of nodes in the <div>

    Not to ask a dumbass question, but what's the point of all your unset( ) calls???

    All those variables are local to the function, so they will all disappear when the addInput() function is finished, anyway.

    Here, a simple sample, based on your code, but without the ugly innerHTML stuff.

    The "counter" and then "newi.value" stuff are just for demo purposes, so you can more clearly see what is happening. If you click the submit button and look at the URL in the address line, you'll see all the "inputs" fields with their values, correctly.
    Code:
    <html><head>
    <script>
    var counter=1;
    function addOne( )
    {
        var ui = document.getElementById("UserInput");
        ui.appendChild( document.createElement("br") );
        var newi = document.createElement("input");
        newi.name = "inputs";
        newi.value = ++counter;
        ui.appendChild(newi);
    }
    </script>
    <body>    
    
    <form name='form'>
    <div id='UserInput'>
    	<input type="text" name="inputs" value="0" />
            <br />
    	<input type="text" name="inputs" value="1" />
    </div>
    <input type=button value="add an inputs field" onclick="addOne();">
    <br/>
    <input type=submit>
    </form>
    
    </body></html>

  • Users who have thanked Old Pedant for this post:

    Rihoj (05-29-2009)

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    58
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Thank you for the help. Truthfully I have never been able to learn how to use the appenedchild and parent functions properly, because every where I go to learn about I can not understand what they are saying. And so when i try it for myself it doesn't work.

    As far as the unset went. It was left over code from another way of coding i tried that failed miserably.

    Thank you once again, that helped a lot.


  •  

    Tags for this Thread

    Posting Permissions

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