Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Динамические формы, "ещё", и всякое такое...

Автор: TUMS 17.2.2009, 09:39

Доброго времени суток, господа.
Постараюсь коротко описать свою цель и проблему, а также как я пытался всё это провернуть...

Цель практически банальна до "баянистого" состояния: создать форму, и динамически её подстраивать.

Для начала делаем собственно форму:

Код


<html>
<body>
<form action="/index.php" method="POST" name="test">
    Имя: <input id="name" type="text" name="name" />
    Код: <input id="kod" type="text" name="id" /> Кол-во: <input id="kolvo" type="text" name="count" />
    <input type="reset" value="Очистить"><input type="submit" value="Сохранить">
</form>
</body>
</html>

Как видите - всё банально.
Теперь добавляем маленький финт с добавлением "хочу ещё поле". При том при всем мы будем копировать только поля "Код" и "Кол-во".
*сам я конечно ничего сам писать не стал, но воспользовался тем что выдал Гугл*
В <head> уходит:

Код


function addField() {
// Создаем элемент ДИВ
var div = document.createElement("div");
// Добавляем HTML-контент с пом. свойства innerHTML
div.innerHTML = "Код: <input id=\"kod\" type=\"text\" name=\"id\" /> Кол-во: <input id=\"kolvo\" type=\"text\" name=\"count\" />";
// Добавляем новый узел в конец списка полей
document.getElementById("parentFields").appendChild(div);
// Возвращаем false, чтобы не было перехода по сслыке
return false;
}

И вносим в форму изменения

Код


<form action="/index.php" method="POST" name="test">
    Имя: <input id="name" type="text" name="name" />
    <div id="parentFields">
        <div>
            Код: <input id="kod" type="text" name="id" /> Кол-во: <input id="kolvo" type="text" name="count" />
            <input type="button" onclick="return addField()" value=" + ">
        </div>
    </div>
    <input type="reset" value="Очистить"><input type="submit" value="Сохранить">
</form>

Теперь внимание, вопрос:
Мы продублировали поля "Код" и "Кол-во".
Следующая задача состоит в создании идентичной "натуральной" форме дополнению.
То есть чтобы у нас создалась примерно такая структура:

Код


<html>
<body>
<form action="/index.php" method="POST" name="test">
    Имя: <input id="name" type="text" name="name1[]" />
    Код: <input id="kod" type="text" name="name1[]id[]" /> Кол-во: <input id="kolvo" type="text" name="name1[]count[]" />

    Имя: <input id="name" type="text" name="name2[]" />
    Код: <input id="kod" type="text" name="name2[]id[]" /> Кол-во: <input id="kolvo" type="text" name="name2[]count[]" />
    <input type="reset" value="Очистить"><input type="submit" value="Сохранить">
</form>
</body>
</html>

Но при этом была возможность добавлять поля в каждую из этих "подформ" по отдельности.

Заранее спасибо.

Автор: bars80080 17.2.2009, 15:11

почитай эту тему http://forum.vingrad.ru/index.php?showtopic=246835&view=findpost&p=1782604 , может она поможет
по сути там идёт клонирование участков таблицы, и если нужно, не сложно опираясь на блок tbody добавлять поля в конкретную часть формы

Автор: TUMS 26.2.2009, 12:32

Хм. А можно я проще распишу задачку?
Задача скрипта в целом заключалась в генерировании массива и передачи его в POST.
А сам массив должен был быть вида

Код


$_POST = array(
    $name_1=>array(
        $kod_1=>$kolvo_1,
        $kod_2=>$kolvo_2,
        $kod_3=>$kolvo_3,
        $kod_n=>$kolvo_n
    );
    $name_2=>array(
        $kod_1=>$kolvo_1,
        $kod_2=>$kolvo_2,
        $kod_3=>$kolvo_3,
        $kod_n=>$kolvo_n
    );
    $name_n=>array(
        $kod_1=>$kolvo_1,
        $kod_2=>$kolvo_2,
        $kod_3=>$kolvo_3,
        $kod_n=>$kolvo_n
    );
);

Признаюсь, я полный ноль в JS, понимаю только то, что понятно из аналогии с PHP... Поэтому та ссылка которую вы дали, будет разбиратся мною месяц... :(