JavaScript — создание динамических форм на основе выбранных значений

Question

JavaScript — создание динамических форм на основе выбранных значений

Я хотел бы создать форму HTML следующим образом:

<form action="<?php print($action); ?>" method="post">
<label for="possibilities">Possibilites</label>
<select name="possibility" id="possibility">
<?php foreach ($possibilites as $possibility): ?>
<option value="<?php print($possibility['id']); ?>"><?php
print($possibility['name']); ?></option>
<?php endforeach; ?>
</select>
<rest>The rest of the form</rest>
</form>

Когда пользователь выбирает определенное значение в меню параметров,
остальная часть формы будет сгенерирована (вместо <rest>The rest of the form</rest>)

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

Как бы вы сгенерировали оставшуюся часть формы на основе значения, выбранного из опций?

Остальная часть формы будет принимать множество переменных PHP в различных входных элементах, генерируемых динамически. Пользователь должен иметь возможность переключаться между различными отдыхами (<rest> ... </rest> пока он не отправит заполненную форму. Код не должен открывать дыры в безопасности.

Какой подход вы бы выбрали и почему? (Javascript с загрузкой частичных файлов HTML? Создание различных деревьев DOM (с переменными PHP в нем) для <rest>...</rest>s или какой-то подход из кода PHP)?

1

forms html javascript php

Решение

Другие решения

создать дополнительный элемент div или любой другой элемент HTML, где должна отображаться форма

<div class="formGenerated"></div>

Тогда в JavaScript
событие change помогает узнать, когда выбрана какая-либо опция

$(document).ready(function() {
$('#possibility').on('change', function() {
var selectedVal =  $('#possibility').val();//value of the option selected
$.ajax({
url:'multipleForms.php',
type:'POST',
dataType:'json',
data:{name:selectedVal},
success:function(resp){
$('.formGenerated').html(resp);
}
});
});
});

// multipleForms.php
<?php
$name = $_POST['name'];
if($name == 'x'){
$x = 'your form goes here';
echo json_encode($x);
}
//similarly for other conditions
?>

Надеюсь, это поможет вам.

3

Построение различных DOM-деревьев — более быстрый выбор. И нет лучшего или более безопасного выбора на самом деле, оба одинаковы, если мы говорим о безопасности …

1

Используйте фрагмент документа и манипуляции с dom для динамического обновления вашей разметки. Это достаточно быстро и полностью на стороне клиента. Что касается использования jQuery, я бы предпочел не зависеть от фреймворка, если вам не нужны какие-то конкретные опции, предоставляемые этими фреймворками.

Doc:

1

Для меня это будет зависеть от нескольких вещей:

Сколько дополнительных элементов формы вам нужно отобразить?
Вам нужно записать шаги по заполнению формы на стороне сервера каким-либо образом?
Нужно ли оценивать данные, представленные в форме, вместе с данными, доступными только на сервере, чтобы определить, какие следующие компоненты формы будут отображаться?

Если у вас есть только несколько различных параметров формы и добавление в DOM, так как скрытые элементы при загрузке страницы не добавляют то, что вы считаете неприемлемым, то время дополнительной загрузки страницы, вы можете настоятельно рекомендовать javascript-решение для скрытия / отображения элементов формы, основанное на Ваша желаемая логика. Если вы ответили «да» на любой из других пунктов и предполагаете, что хотите сделать все это без перезагрузки страницы, вам нужно будет использовать методологию AJAX.

1

Источник

Accepted Answer

С jquery tho следующий код будет вариант:

$(document).ready(function() {
$('#selectId').on('change', function() {
$('#restDivId').load('partialHtmlPage.php?value=' + $('#selectId').val());
});
});

1