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;
}

以下内容适用于生成下拉列表，但不保留任何值：

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

代码不起作用，因为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'];?>";

}

Answer 2

你的代码中有引号创建选项时会有一些奇怪的现象。试试这个：

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

为了便于阅读，我将所选部分拆分出来。有时候尝试将所有内容塞入一行可能会让人感到困惑，并且更难以查看错误发生的位置。

保留表单提交下拉值

2 个答案: