Retaining Dropdown Values on Form Submit

Question

I have a simple PHP form that has 7 fields, 6 of which are required. One of the required fields is an age dropdown that I'm populating with JavaScript.

The problem I'm facing is that when the user inputs 5 of the 6 required fields, the form complains about the missing field (as it should), but also wipes out all of the user inputs - so I'm trying to retain that information.

Using a single dropdown (PrimaryAge) as an example, I have the following Javascript code that isn't working - the dropdowns aren't even populated when I run the page

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

The following works in generating the dropdowns, but none of the values are retained:

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

The HTML form code is below:

<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

The code does not work because js and php, server side and frontend are mixed. Consider this <? php if($_SESSION["PrimaryAge"] == 'y' <? php if($_SESSION["PrimaryAge"] == 'y' . When the php piece runs on the server, the server does not know about javascript variable y !

This should work:

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

You have some weirdness going on with quotes in your code creating the option. Try this:

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

I've split the selected section out just for readability's sake. Sometimes trying to cram everything into a single line can get confusing and make it harder to see where errors are occuring.