Добавление полей динамически формы в зависимости от выбора поля со списком с Javascript

Question

Мне нужно создать страницу подачи информации для веб-сайта, где будут присутствовать некоторые поля, которые должны быть сгенерированы для значения после выбора значения поля со списком.

Как если бы мы выбрали «2» из значения поля со списком, должны быть созданы два поля персональных данных. Позже я должен вставить эти значения в БД с помощью PHP.

Я должен также поставить проверки для этих сгенерированных полей.

Есть много полей, в которых я должен использовать что-то подобное. Но я должен начать с этого.

Пожалуйста, помогите мне или дайте мне ссылки, по которым я могу получить помощь по этому вопросу.

Спасибо.

Answer 1

Я предполагаю, что ваша комбо будет идентифицирована как ".valueCount" и что количество элементов по умолчанию равно единице, которую можно найти в ".field".Общий контейнер всего этого идентифицируется как «fieldgroup»

Ваше первое поле должно иметь имя, установленное на что-то вроде dynamicfield[].Замените «dynamicfield» тем, что вы хотите.

Затем используйте jQuery, чтобы создать прототип для вашего первого поля:

var $prototype = $(".field").clone();

Обратите внимание, что .field может быть общей оболочкой самого поля.

Теперь создайте обработчик событий для вашей комбинации:

$(".valueCount").change(function(){
   var count = $(this).val(), $fields = $(this).closest("fieldgroup").find(".field");


   if ($fields.size() > count)
       //remove fields
       $fields.slice(count).remove();
   else if ($fields.size() < count) {
       //add fields

       for (var i = count - $fields.size() ; i ; i--)
            $prototype.clone().insertAfter($fields.last());
   }           

});

На стороне сервера вы будете иметь все значения в одном массиве $ _REQUEST ['dynamicfield'];

Сделайте любую понравившуюся вам проверку.

Answer 2

Во-первых, я бы посоветовал вам научиться работать с JQuery (библиотекой javascript).

http://api.jquery.com/

http://docs.jquery.com/Plugins/Validation

http://docs.jquery.com/UI/Autocomplete

Я сделал нечто похожее на то, что вы описываете, используя функции автозаполнения, клонирования, изменения местоположения и проверки подлинности пользовательского интерфейса jquery, и все это относительно просто. По сути, вы должны будете использовать в форме jquery validate (плагин jquery), вставить автозаполнение пользовательского интерфейса jquery для вашего комбинированного списка с помощью onchange и иметь все поля сведений, которые вы можете включить в скрытый divs вне формы. Когда выпадающий список изменяется, он вызывает функцию, которая уничтожает поля по мере необходимости, затем клонирует пустые поля извне формы, заполняет их (при необходимости) и вставляет их в соответствующие места внутри формы. Валидатор работает с атрибутом класса, поэтому достаточно просто убедиться, что новые поля имеют правильный класс, и их будет достаточно для проверки. Jquery и его плагины работают практически везде, как и в стандартном javascript, поэтому их не так сложно интегрировать. Есть немного ускорения, когда вы выясняете, как делать вещи, но, похоже, у вас их будет достаточно в любом случае, и это будет намного проще в среднесрочной и долгосрочной перспективе. .