Я буду использовать упрощенную версию ниже, но я пытаюсь создать форму с простыми вопросами да / нет. Если ответ «нет», объяснение не требуется. Если ответ «да», вставляется новая строка таблицы и появляется текстовое поле, требующее объяснения для этого конкретного вопроса.
Следует отметить, что я использую плагин jQuery validate , чтобы убедиться, что значения проверены и планируем реализовать функцию обязательной зависимости для каждого поля в конце.
Моя форма:
<form name="formtest" action="">
<table class="background_table">
<tbody>
<tr>
<td>Are you a man?</td>
<td>
<input type="radio" name="q1" id="yes1">Yes
<input type="radio" name="q1" id="no1">No
</td>
</tr>
<tr>
<td>Do you have hair?</td>
<td>
<input type="radio" name="q2" id="yes2">Yes
<input type="radio" name="q2" id="no2">No
</td>
</tr>
<tr>
<td>Do you have children?</td>
<td>
<input type="radio" name="q3" id="yes3">Yes
<input type="radio" name="q3" id="no3">No
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
Я полагаю, что моя функция jQuery будет перебирать все поля (учитывая, что моя фактическая форма содержит более 20 вопросов) с использованием функции .each (), а затем запускать тест для отдельных полей, чтобы проверить, было ли значение yes: флажок. Если это была новая строка, вставьте после поля с пустой текстовой областью.
Я не совсем уверен, какой наилучший метод для именования и идентификации текстовых областей может быть в настоящее время. В конечном итоге все ответы в текстовой области могут быть объединены в массив, который, я полагаю, разбиты по идентификатору и значению, но пока я не уверен, как бы мне хотелось с этим справиться.
Функция jQuery:
$(function() {
$('input').each( function() {
if( $('#yes1').is(':checked')) { //need to figure out how to find the yes value for each input
$('#yes1').closest('tr').after('<tr><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
}
});
$("#formtest").validate({
errorLabelContainer: "#form_error_message",
wrapper: "li",
rules: {
q1: 'required',
q2: 'required',
q3: 'required',
q4: 'required',
a1: { required: "yes1:checked" },
a2: { required: "yes2:checked" },
a3: { required: "yes3:checked" },
a4: { required: "yes4:checked" }
},
messages: {
//custom messages for all rules above
},
submitHandler: function() {
//Do processing
}
});
});
Моя функция в настоящее время не работает, но я ищу руководство о том, как этого можно добиться наилучшим образом. В конце, возможно, будет проще представить одну текстовую область для объяснения ЛЮБОГО флажка, на который ответят «да» в конце формы, но мне кажется, что первоначальный метод выглядит лучше и позволяет мне разделять ответы, если я хочу.
окончательное обновление
Следует отметить, что как часть формы пользователи имеют возможность вернуться на эту страницу. Чтобы им не приходилось перепечатывать ответы и выборки, я использую переменные PHP SESSION для хранения ранее введенных данных. Мне нужно было убедиться, что окна объяснения показываются или скрываются по мере необходимости. Чтобы предотвратить любые проблемы с не-js браузерами, у меня все мои окна объяснения отображаются изначально, а затем устанавливаются скрытыми, если значение соответствующего флажка не равно значению 1:
$(":radio:checked").each(function() {
if( $(this).val() != 1) {
$(this).closest('tr').next().hide();
}
});