superdan_35 Posted May 19, 2009 Share Posted May 19, 2009 Hi all. I am trying to make a form where the user enters the number of entries they wish to make into a textbox and that amount of new textboxes would automatically appear below. Any suggestions? Thanks, Dan Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 19, 2009 Share Posted May 19, 2009 Well, if you want to take accessability in mind as well as compatability for user without JS enabled I would start go with a max number of input boxes and then show/hide the appropriate number. Then if the user does not have JS enabled they will just get the max allowable. If you can't go with a max value then you will have to create the fields dynamically which will prevent anyone without JS enabled from using your page. Plus, you will have to think about what to do if the user wants to reduce the number of fields (if anything). Here's a script I alredy have which starts with four fields and then as you get to the end will continue to add fields one at a time automatically. I like this better than adding a predetermined set of fields specified by the user as it only adds fields as they need them. But, this could be easily modified to do exactly as you asked in your post <html> <head> <script> function addTiming(field) { thisFieldIdx = field.id.substr(6); newFieldIdx = thisFieldIdx*1 + 1; if (!document.getElementById('timing'+newFieldIdx)) { timingDiv = document.getElementById('timings'); timingDiv.innerHTML = timingDiv.innerHTML + 'Timing '+newFieldIdx+': <input type="text" name="timing'+newFieldIdx+'" id="timing'+newFieldIdx+'" onfocus="addTiming(this);"><br>'; } document.getElementById('timing'+thisFieldIdx).select(); document.getElementById('timing'+thisFieldIdx).focus(); return; } </script> </head> <body> <form name="formname"> <div id="timings"> Timing 1: <input type="text" name="timing1" id="timing1"><br> Timing 2: <input type="text" name="timing2" id="timing2"><br> Timing 3: <input type="text" name="timing3" id="timing3"><br> Timing 4: <input type="text" name="timing4" id="timing4" onfocus="addTiming(this);"><br> </form> </div> </body> </html> 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.