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

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

8 голосов
/ 01 марта 2011

Я хотел бы создать форму, которая изменяется динамически.

У меня есть форма для создания проекта (с такими полями, как: имя_проекта, описание_проекта ...), и проект может иметь любое количество (больше или равно 0) категорий.

Я хочу отобразить кнопку, которая дает пользователю возможность добавить другое поле категории.Кроме того, я хотел бы, чтобы опция для полей категории была «удалена» пользователем (если он передумал или допустил ошибку).Что было бы лучшим способом сделать это.Я хотел бы решение типа Ajax.

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

Есть ли более простое решение для этого?

Ответы [ 3 ]

12 голосов
/ 01 марта 2011

Если вы пытаетесь динамически добавлять поля с помощью кнопки, вы можете легко сделать это, выполнив что-то вроде следующего:

HTML: 

<form>
    <p>
        <label>Name:</label> <input type="text">
        <label>Age:</label> <input type="text">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
</form>

JS: 

$(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

Демо: http://jsfiddle.net/UeSsu/1/

0 голосов
/ 12 июня 2012

Я сделал нечто подобное.Чтобы удалить поля, я действительно не удалил поля.Я просто спрятал их с помощью display:none, и у меня было скрытое input «удаление», которое я активировал в true.Затем страница, получающая результат, знает, какое поле необходимо удалить в базе данных.

Они не удаляются до отправки формы.Это похоже на концепцию «два прохода».Но если вам не нужен настоящий Ajax, он работает нормально.В противном случае вам потребуется функция удаления JS, чтобы вызвать сервер и указать удалить поле с его идентификатором.Немного сложнее кодировать.

0 голосов
/ 01 марта 2011

Я начал писать генератор форм, основанный на определении в JSON некоторое время назад.Это работает, но может использовать некоторые улучшения.Он написан с использованием Prototype.js, но его перенос на jQuery не составит большого труда.

Вы можете украсть код .(просто посмотреть источник)

...