在表单提交上保留下拉值
Retaining Dropdown Values on Form Submit
我有一个简单的PHP表单,有7个字段,其中6个是必需的。其中一个必需的字段是我用JavaScript填充的年龄下拉列表。
我面临的问题是,当用户输入6个必需字段中的5个时,表单会抱怨缺少字段(应该如此),但也会删除所有用户输入-所以我试图保留该信息。
以单个下拉菜单(PrimaryAge)为例,我有以下无法工作的Javascript代码—当我运行页面
时,下拉菜单甚至没有填充。function setAgeDropDowns(){
var minAge = 19;
var maxAge = 65;
var options = "<option value='"'" style='"display:none'">Select</option>";
for(var y=minAge; y<=maxAge; y++){
options += "<option value='""+y+"'"+"<?php if($_SESSION["PrimaryAge"] == 'y') { ?> selected <?php } ?>"+">"+ y +"</option>";
}
document.getElementById("PrimaryAge").innerHTML = options;
}
下面的代码可以生成下拉列表,但是没有保留任何值:
function setAgeDropDowns(){
var minAge = 19;
var maxAge = 65;
var options = "<option value='"'" style='"display:none'">Select</option>";
for(var y=minAge; y<=maxAge; y++){
options += "<option>"+ y +"</option>";
}
document.getElementById("PrimaryAge").innerHTML = options;
}
HTML表单代码如下:
<div id="form-area">
<form id="form1" name="form1" method="post" action="Form2.php">
<table width="801" border="0">
<tr>
<td width="329"><div id="categoryHeading"><label>Personal Details</label></div></td>
<td width="462"> </td>
</tr>
<tr>
<td><label for="PrimaryAge">Age:</label></td>
<td>
<select name="PrimaryAge" id="PrimaryAge">
</select>
<span class="error">* <?php echo $ageErr;?></span>
</td>
</tr>
<tr>
</tr>
<tr>
<td><label for="PrimaryRetirementAge">Retirement Age:</label></td>
<td>
<select name="PrimaryRetirementAge" id="PrimaryRetirementAge">
</select>
<span class="error">* <?php echo $retirementAgeErr;?></span>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div id="categoryHeading"><label>Income (annual)</label></div></td>
<td> </td>
</tr>
<tr>
<td><label for="PrimarySalary">Salary:</label></td>
<td>
<input type="text" name="PrimarySalary" id="PrimarySalary" />
<span class="error">* <?php echo $salaryErr;?></span>
</td>
</tr>
<tr>
<td><label for="PrimaryOtherIncome">Other: </label></td>
<td><input type="text" name="PrimaryOtherIncome" id="PrimaryOtherIncome" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>Do you have a partner in life?</label></td>
<td>
<select name="CoupleDropDown" id="CoupleDropDown">
<option value="" style="display:none">Select</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<span class="error">* <?php echo $partnerErr;?></span></label></td>
</tr>
<tr>
<td><label>Do you have or plan to have kids?</label></td>
<td>
<select name="KidsDropDown" id="KidsDropDown">
<option value="" style="display:none">Select</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<span class="error">* <?php echo $kidsErr;?></span>
</td>
</tr>
<tr>
<td><label>Do you own or plan to own a house?</label></td>
<td><select name="HouseDropDown" id="HouseDropDown">
<option value="" style="display:none">Select</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<span class="error">* <?php echo $houseErr;?></span>
</td>
</tr>
</table>
<p>
<input type="submit" name="PersonalInfoSubmit" id="PersonalInfoSubmit" value="Next" class="submit-button"/>
</p>
</form>
</div>
</body>
</html>
代码不工作,因为js和php,服务器端和前端是混合的。考虑这个<? php if($_SESSION["PrimaryAge"] == 'y'
。当php片段在服务器上运行时,服务器不知道javascript变量y
!
这个应该可以工作:
function setAgeDropDowns(){
var minAge = 19;
var maxAge = 65;
var options = "<option value='"'" style='"display:none'">Select</option>";
for(var y=minAge; y<=maxAge; y++){
options += "<option>"+ y +"</option>";
}
document.getElementById("PrimaryAge").innerHTML = options;
document.getElementById("PrimaryAge").value="<?php echo $_GET['PrimaryAge'];?>";
}
您在创建选项的代码中使用了一些奇怪的引号。试试这个:
var selected = '<?php echo $_SESSION["PrimaryAge"] == 'y' ? 'selected' : ''; ?>';
options += '<option value="' + y + '" ' + selected + '>' + y +'</option>';
为了便于阅读,我把选中的部分分开了。有时,试图将所有内容塞进一行可能会让人感到困惑,并且很难看到哪里出现了错误。
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- 表单提交后保留数据库查询结果
- 阻止表单提交,但保留表单验证
- PureCSS在表单提交时停止页面重新加载,但保留表单验证
- 表单提交后保留所选数据
- 提交后保留表单值
- 停止表单提交并保留表单值
- 表单提交后如何保留下拉选择的值
- 表单提交后保留所选值
- 在表单提交上保留下拉值