Динамический ввод HTML-формы - PullRequest
Новая
       16

Динамический ввод HTML-формы

0 голосов
/ 17 ноября 2009

Можно ли создать HTML-форму, отвечающую количеству вещей, которые пользователь хочет отправить?

То есть то, что у меня сейчас есть: 

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

Когда пользователь выбирает один из вариантов, *** должно иметь 

<input type="text" ...>

отображается количество раз, выбранное пользователем.

То есть, если пользователь выбрал 5 из опций, то пользователь должен увидеть 5 опций ввода. Если он передумает выбрать 2 вместо этого, то страница должна обновиться соответственно, чтобы показать только 2 варианта ввода.

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

Я изменил код, чтобы ввод был просто текстом. Код у меня не работает. Не обновляет количество полей ввода. 

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

Ответы [ 2 ]

2 голосов
/ 17 ноября 2009

Это хорошая идея, когда вы хотите, чтобы пользователь мог загружать произвольное количество файлов или что-то в этом роде. Вы можете сделать это с помощью Javascript:

  • Пустой DIV рядом с SELECT
  • Привязать функцию к событию «onchange» в элементе выбора
  • В функции прочитайте значение элемента SELECT и:
    • Очистить DIV
    • Создать эквивалентное число внутри DIV

Вам нужен код? Если вы делаете, прототип в порядке?

ОК, извините за задержку, много работы в последнее время.

Следующего должно быть достаточно, чтобы вы поняли. Вы должны будете изучить 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>
1 голос
/ 17 ноября 2009

Да, используйте событие onChange вашего выпадающего поля ввода и отображайте / скрывайте поля ввода.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...