后续字段php/html表单
我正在尝试为选择下拉菜单创建后续字段 例如,在第一个下拉菜单中,我有'yes'=>1,'no'=>2,'nothing'=>3。 我希望在我点击选择一个选项后,随后出现的字段发生更改。 例如:如果我选择“是”,下面的字段将是一个“选择”下拉菜单,如果选择“否”,则它将是一个文本区域,如果选择“无”,则它将是“无” 我为自己尝试了一些代码,但没有成功,因为我不知道如何在选择某个内容后立即更新以下字段。我试过这样的方法:后续字段php/html表单,php,select,option,Php,Select,Option,我正在尝试为选择下拉菜单创建后续字段 例如,在第一个下拉菜单中,我有'yes'=>1,'no'=>2,'nothing'=>3。 我希望在我点击选择一个选项后,随后出现的字段发生更改。 例如:如果我选择“是”,下面的字段将是一个“选择”下拉菜单,如果选择“否”,则它将是一个文本区域,如果选择“无”,则它将是“无” 我为自己尝试了一些代码,但没有成功,因为我不知道如何在选择某个内容后立即更新以下字段。我试过这样的方法: if (select == 1) { echo "$select2";
if (select == 1) {
echo "$select2";
} else if (select == 2) {
echo "<input type='text' name='textarea1'/>";
}
但是我不知道如何让页面更新字段
请帮帮我
谢谢我们的想法是,根据前面问题的答案,使用JavaScript显示/隐藏问题。这被称为一个。如果你愿意,他们会来的。您可以找到大量的示例和库,它们为您完成了大部分繁重的工作 如果你想建立自己的,这里有一个非常简单的方法。这不是一个可扩展的解决方案,但它应该让您了解它应该如何工作 HTML CSS
通常,我会将表单提交给它自己,它会根据表单标记中的操作集将所有字段创建为$\u POST或$\u GET变量,这将使您能够在php中加载正确的字段,如果表单post中的值是您所需要的,那么听起来您需要使用一些JavaScript,尽管仍然是sonsider@allightd的建议。JavaScript将允许您根据Yes/No/Nothing下拉列表立即显示/隐藏任何需要的后续字段,而无需刷新页面。有助于获得更好的用户体验。你愿意接受JS解决方案吗?@AymanSafadi我对JS很陌生,所以如果你也能解释一下,我很乐意学习新东西。谢谢
<label>Do you want this?
<select name="choices" id="choices">
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3" selected>Nothing</option>
</select>
</label>
<div id="choices-followup">
<div id="followup1">
<label>
How bad do you want this?
<select>
<option>Give it to me now!</option>
<option>Meh...</option>
</select>
</label>
</div>
<div id="followup2">
<label>Why not?<br />
<textarea></textarea>
</label>
</div>
</div>
// Whenever the user changes the value of
// the element with ID "choices", perform
// this function.
$('#choices').on('change', function() {
// Grab the choice value
var choice = $(this).val();
// Cache the "choices-followup" object.
// Every time to you call $('anything'), jQuery
// goes through the entire DOM looking for that
// object. Prevent this by making the lookup
// once, and caching the value.
var choices_followup = $('#choices-followup');
// No matter what the choice, hide all possible
// follup fields.
$('div', choices_followup).hide();
// Also, reset their values.
$('select, textarea, input', choices_followup).val('');
// If this, then that, etc.
switch(choice) {
case '1':
$('#followup1').show();
break;
case '2':
$('#followup2').show();
break;
}
});
#choices-followup > div { display: none; }