stervyatnik Posted January 31, 2008 Share Posted January 31, 2008 Hello, all! I have modified a script which dynamically generates form inputs on a PHP page using JavaScript. For example, a user can click on an "Add input" link, and a new text input is generated. If the user clicks that link three times, three new text inputs are generated. That part works well, and here's the code: <HEAD> <script type="text/javascript"> <!-- Begin var arrInput = new Array(0); var arrInputValue = new Array(0); function addInput() { //arrInput.push(createInput(arrInput.length)); arrInput.push(arrInput.length); //arrInputValue.push(arrInputValue.length); arrInputValue.push(""); display(); } function display() { document.getElementById('parah').innerHTML=""; for (intI=0;intI<arrInput.length;intI++) { document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]); } } function saveValue(intId,strValue) { arrInputValue[intId]=strValue; } function createInput(id,value) { return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>"; } function deleteInput() { if (arrInput.length > 0) { arrInput.pop(); arrInputValue.pop(); } display(); } // End --> </script> </HEAD> <BODY> <p id="parah">Dynamic creation of input boxes</p> <a href="javascript:addInput()">Add more input field(s)</a><br> <a href="javascript:deleteInput()">Remove field(s)</a> The above code was obtained from JavaScript Source (javascript.internet.com), and I just modified it for my use. Now, the additional text boxes are part of a form, and because they're dynamically generated, I have no idea how to "read" them in the action page. If the action sends them to the "step2.php" page, how can I "retrieve" all the possible new text inputs and their values in the "step2.php" page? I assume there's an array - $_POST? - that I should be able to loop through, but how do I do it? It could be anything from one to umpteen additional text inputs. Anybody able to help me on this? Quote Link to comment Share on other sites More sharing options...
drisate Posted January 31, 2008 Share Posted January 31, 2008 Currently your imput looks like this <input id="test 0" onchange="javascript:saveValue(0,this.value)" name="T1" size="20"><br> <input id="test 1" onchange="javascript:saveValue(1,this.value)" name="T2" size="20"><br> <input id="test 2" onchange="javascript:saveValue(2,this.value)" name="T3" size="20"><br> <input id="test 3" onchange="javascript:saveValue(3,this.value)" name="T4" size="20"><br> <input id="test 4" onchange="javascript:saveValue(4,this.value)" name="T5" size="20"><br> <input id="test 5" onchange="javascript:saveValue(5,this.value)" name="T6" size="20"><br> Make your self a hidden input and put in it the number of feilds created then loop them with a for loop Quote Link to comment Share on other sites More sharing options...
PFMaBiSmAd Posted January 31, 2008 Share Posted January 31, 2008 Form fields need a name="...." parameter for the data to have a name and be submitted to the server. The form processing code then accesses each piece of data by its name. Use an array for the name so that you don't need to carry around any additional information about how many fields there are. Quote Link to comment Share on other sites More sharing options...
stervyatnik Posted January 31, 2008 Author Share Posted January 31, 2008 Thanks for all your help! I used your suggestions, and have a working prototype to press on with. Again, thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.