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)?
Решение
С jquery tho следующий код будет вариант:
$(document).ready(function() {
$('#selectId').on('change', function() {
$('#restDivId').load('partialHtmlPage.php?value=' + $('#selectId').val());
});
});
Другие решения
создать дополнительный элемент 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
?>
Надеюсь, это поможет вам.
Построение различных DOM-деревьев — более быстрый выбор. И нет лучшего или более безопасного выбора на самом деле, оба одинаковы, если мы говорим о безопасности …
Используйте фрагмент документа и манипуляции с dom для динамического обновления вашей разметки. Это достаточно быстро и полностью на стороне клиента. Что касается использования jQuery, я бы предпочел не зависеть от фреймворка, если вам не нужны какие-то конкретные опции, предоставляемые этими фреймворками.
Doc:
Для меня это будет зависеть от нескольких вещей:
- Сколько дополнительных элементов формы вам нужно отобразить?
- Вам нужно записать шаги по заполнению формы на стороне сервера каким-либо образом?
- Нужно ли оценивать данные, представленные в форме, вместе с данными, доступными только на сервере, чтобы определить, какие следующие компоненты формы будут отображаться?
Если у вас есть только несколько различных параметров формы и добавление в DOM, так как скрытые элементы при загрузке страницы не добавляют то, что вы считаете неприемлемым, то время дополнительной загрузки страницы, вы можете настоятельно рекомендовать javascript-решение для скрытия / отображения элементов формы, основанное на Ваша желаемая логика. Если вы ответили «да» на любой из других пунктов и предполагаете, что хотите сделать все это без перезагрузки страницы, вам нужно будет использовать методологию AJAX.