Home/ Questions/Q 462485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T23:04:45+00:00

Is it possible to make an HTML form that responds to the number of

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0