Question

是否可以制作一个HTML表单来响应用户想要发送的内容的数量？

也就是说，我现在拥有的是：

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

当用户选择其中一个选项时，***应该

<input type="text" ...>

显示用户选择的次数。

也就是说，如果用户从选项中选择了5，那么用户应该看到5个输入选项。如果他改变主意选择2，那么页面应相应更新以仅显示2个输入选项。

===== [编辑] =====

我已经更改了代码以使输入只是文本。我的代码不起作用。它不会更新输入字段的数量。

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

当我有一个 document.write 而不是 appendTo 时，它有效，但我基本上希望页面保持不变，除了用户之后的额外输入字段更改 numvars 字段中的值。

Answer 1

当您希望用户能够上传任意数量的文件或类似内容时，这是一个好主意。你可以使用Javascript：

在SELECT
将函数绑定到select元素
在函数中，读取SELECT元素的值并：
- 清空DIV
- 创建等效数量的＆lt; INPUT type =“text”＆gt;在DIV内部

你需要代码吗？如果你这样做，Prototype好吗？

好的，抱歉延迟，最近要做很多工作。

以下内容足以让您了解一下。你必须学习JS，我甚至不知道你在问题中使用 appendTo 的东西。

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

Answer 2

是使用下拉输入字段的onChange事件并显示/隐藏输入字段。

动态HTML表单输入

2 个答案: