CODEWITHSUNDEEP
htmlforms
boo-urns
boo-urns

Reputation: 10376

Dynamic HTML Form Entry

Is it possible to make an HTML form that responds to the number of things the user wants to send over?

That is, what I have now is:

<form ...>
   <select ...>
      <option>1</option>
      <option>2</option>
      ...
   </select>
   ***
</form>

When the user selects one of the options, *** should have

<input type="text" ...>

appear the number of times the user selected.

That is, if the user selected 5 from the options, then the user should see 5 input options. If he changes his mind selected 2 instead, then the page should update accordingly to show only 2 input options.

=====[EDIT]=====

I've changed the code to have the input just be text. The code I have does not work. It doesn't update the number of input fields.

<script type="text/javascript">
<!--
function updateOptions(nvars)
{
    var n = nvars;
    while(n>0) {
         var newdiv1 = "<div>Var name: <input type=\"text\" name=\"var-name\"><br></div>";
         var newdiv2 = "<div>Var type: <input type=\"text\" name=\"var-type\"><br></div>";
         newdiv1.appendTo("#bloo");
         newdiv2.appendTo("#bloo");
         n--;
    }
}
//-->
</script>

<h3>Create a table in the test db!<h3>
<form name="f1" method="POST" action="createTable.php">
        Name of Table: <input type="text" name="table-name"><br>
        No of vars: <input type="text" name="numvars" onChange="updateOptions(this.value)"><br>
        <div id="bloo"></div>
</form>

It worked when I had a document.write instead of an appendTo, but I essentially want the page the remain the same save for the extra input fields after the user changes the value in the numvars field.

Upvotes: 0

Views: 1093

Answers (2)

Kaze no Koe
Kaze no Koe

Reputation: 3254

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>

Upvotes: 2

Murali VP
Murali VP

Reputation: 6427

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

Upvotes: 1

Related Questions