Javascript/PHP在表单提交时重新填充下拉列表失败
Javascript/PHP re-populate dropdown on form submission fails
我使用so javascript根据下拉选择加载不同的表单,如下所示:
<select id = "opts" onchange = "showForm()">
<option value = "0">Select Option</option>
<option value = "1">Option 1</option>
<option value = "2">Option 2</option>
</select>
<div id = "f1" style="display:none">
<form name= "form1">
Content of Form 1
</form>
</div>
<div id = "f2" style="display:none">
<form name= "form2">
Content of Form 2
</form>
</div>
<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}
</script>
我已经删除了实际的表格细节,因为它们在这一点上并不重要。无论如何,当表单提交时,它通过了一系列验证:
if (isset($_POST['submitted'])) {
//validation codes
}
这很好,但如果验证失败,它会重新加载页面,从而重置下拉框,并且不会显示以前选择的选项。我希望它保留以前的选择,或者只是在提交失败时将选择1加载到javascript位中。有什么想法吗?
Ian
如果验证未通过,您可以在javascript的末尾执行此操作
window.onload = function(){
document.getElementById("opts").value = <?php echo $_POST['opts']; ?>;
}
使用此
window.onload=function() {
document.getElementById("opts").onchange=function() {
var selopt = this.value;
document.getElementById("f1").style.display=(selopt==1)?"block":"none";
document.getElementById("f2").style.display=(selopt==2)?"block":"none";
}
document.getElementById("opts").onchange(); // show/hide when reloaded
}
使用这个PHP,它将把选择设置为提交时的任何内容
<? $sel = $_POST['opts']; ?>
<select name="opts" id ="opts">
<option value = "0"<? if ($sel==0) echo " selected ";?>>Select Option</option>
<option value = "1"<? if ($sel==1) echo " selected ";?>>Option 1</option>
<option value = "2"<? if ($sel==2) echo " selected ";?>>Option 2</option>
</select>
相关文章:
- 如何设置html元素填充的动画
- 如何使用jquery在填充自动完成的值后使文本框只读
- 如何通过ajax刷新JSF填充的javascript变量
- 用与线条相同的颜色填充多折线图上的点
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 当json解析空响应时,Whatwg-Fetch失败,我该如何防止它
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 用我的json数据填充JQuery DataTable
- 使用 jquery 填充选择选项失败
- 使用带图案的填充时,canvas.toblob将失败
- 用户使用javascript生成的输入字段,如果验证失败,我如何将他们的数据填充回输入字段
- Javascript/PHP在表单提交时重新填充下拉列表失败
- D3从csv填充数据集失败
- 通过AJAX填充下拉菜单失败
- 在Codeigniter验证失败后重新填充动态javascript
- 在IE7, 8和9中填充列表时脚本失败
- 当最后一个输入被填充时,JQuery ajax调用失败
- 使用条件填充失败
- Dynamic Directive元素在来自服务的预填充数据中失败
- 为什么在javascript中填充2D数组失败