ansaurus

Question

Answer 1

+1 A:

Yes use onChange event of your dropdown input field and show/hide your input fields.

Murali VP 2009-11-17 08:13:04

Answer 2

+2 A:

That's a good idea when you want the user to be able to upload an arbitrary number of files or something like that. You can do it with Javascript:

Have an empty DIV near the SELECT
Bind a function to the "onchange" event on the select element
In the function, read the value of the SELECT element and:
- Empty the DIV
- Create an equivalent number of <INPUT type="text"> inside the DIV

Do you need code? If you do, is Prototype OK?

OK, sorry for the delay, lots of work to do lately.

The following should be enough for you to get an idea. You'll have to study JS though, I don't even know what you're doing with the appendTo stuff in your question.

<html>
    <head>
    </head>
    <body>
        <form>
            <select id="num" value="1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

            <div id="container">
                <p>
                    <input type="text" name="var-name" />
                    <input type="text" name="var-type" />
                </p>
            </div>
        </form>


        <script type="text/javascript">
            var selectElm = document.getElementById('num');
            var containerElm = document.getElementById('container');

            var update = function () {
                containerElm.innerHTML = '';
                for (var i = 0, l = selectElm.value; i < l; ++i) {
                    containerElm.innerHTML += '<p><input type="text" name="var-name" /><br /><input type="text" name="var-type" /></p>';
                } // add a number of couples of <input> equal to selectElm.value
            }

            //the following stuff says that when <select> changes the function called "update" must fire. Most of the code is for compatibility across browsers.
            var listen, evt;
            if (document.attachEvent) {
                listen = 'attachEvent';
                evt = 'onchange' ;
            } else {
                listen = 'addEventListener';
                evt = 'change';
            }
            try {
                selectElm[listen](evt, update);
            } catch (e) {
                selectElm[listen](evt, update, false);
            }
            // You do the same in Prototype with a single line:
            // selectElm.observe('change', update);
            // jQuery also requires only a single line of code.

        </script>
    </body>
</html>

Kaze no Koe 2009-11-17 08:15:51

If it doesn't take too much time, some code would save me a load of time.

Teef L 2009-11-17 08:24:56

I've just learned javascript, so I'm not sure what Prototype is.

Teef L 2009-11-17 08:35:05

Sorry, busy day at work, I'll see if i can write down something later.

Kaze no Koe 2009-11-17 15:12:02

Edited my answer with some code, I hope it will be useful to you somehow :)

Kaze no Koe 2009-11-19 07:51:04

Thanks! That was great!

Teef L 2009-11-21 05:01:21

ansaurus

tags:

views:

answers:

Dynamic HTML Form Entry

related questions