在表單提交中保留下拉值

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

出於可讀性考慮，我將所選部分分開。 有時，嘗試將所有內容都填充到一行中可能會造成混亂，並使查看錯誤發生的位置變得更加困難。