在提交表单时保留下拉值

Question

我有一个简单的 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;
}

以下内容用于生成下拉列表，但保留了 none 个值：

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">&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</td>
      </tr>

      <tr>

    <td><div id="categoryHeading"><label>Income (annual)</label></div></td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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>

Answer 1

您在创建选项的代码中使用引号有些奇怪。试试这个：

var selected = '<?php echo $_SESSION["PrimaryAge"] == 'y' ? 'selected' : ''; ?>';
options += '<option value="' + y + '" ' + selected + '>' + y +'</option>';

为了便于阅读，我将所选部分分开了。有时试图将所有内容都塞进一行可能会造成混淆，并且更难看出错误发生的位置。

Answer 2

代码无法运行，因为 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'];?>";

}

在提交表单时保留下拉值

Retaining Dropdown Values on Form Submit

javascript

php

forms

drop-down-menu