Topic awaiting preservation: Add a form element onClick()

From reading some other threads here I gather that this may just be possible... whether it will be possible cross-browser I'm not so sure on. Basically what I have is a form with (by default) one File input element, a submit and reset button. That's all. What I want to do is to have either a pair of other buttons that will allow a user, onClick, to add or remove another File input element (between 1 and 10 elements), or a text input and a button that will allow them to specify the number of fields they wish to have (again, betwen one and ten, to keep things easy on the processing server). So tell me, oh Javascript Guru type people... is this possible? and, if so, how?


Justice 4 Pat Richard

Sounds like you're doing something like this:

http://www.slimeland.com/cgi-bin/uploaddemo/

That's just a demo version (the real one is password protected in a different directory), so it won't actually work in terms of uploading. However, you can view the script (functionality.js in the same folder) to see how it works. It's all just manipulation of DOM nodes.

This is more than you need, but if you take the time to read through the script you'll probably learn something.

(I can make the script that generates that page available if anyone's interested. It's real useful for getting a file from one computer to another when an FTP client isn't handy.)


 

This isn't really difficult you just need to add the elements to the DOM.

I'd be carefull with this trick though. I've used it to make dynamic forms before, the upside is you have a cleaner page. The Downside is the ability to screw up the back button. Ie someone submits and wants to go back. Everything you did with the JS will get wiped out.

You can deal with this with some js and cookies and/or maybe an AJAX helper function (or use just show/hide unused elements with CSS display, I'm not sure if this will save values but it might) Anyway just to let you know if you want the back to work you'll need to add some code.



.:[ Never resist a perfect moment ]:.