Question

I have a form where, if the user selects “married” from a drop down list, some text fields will be displayed asking for their spouse’s information. Everything works fine in Firefox and IE, but Safari is giving me trouble.

Here is the HTML:

<ul>
<li>
              <label for="maritalStatus">Marital Status</label><br/>
              <select name="maritalStatus" id="maritalStatus" tabindex="80">
                <option name="Single" id="Single" value="Single" selected="selected" onClick="imSingle()">Single</option>

                <option id="Married" name="Married" value="Married" onClick="imMarried()">Married</option>

              </select>
            </li>

<li id="spouseFullName">
              <label for="spouseFullName">Spouse Full Name</label><br/>
              <input type="text" name="Spouse Full Name" id="spouseFullNameField" onchange="spouseName()" tabindex="90"/>
            </li>
            <li id="spouseDOB">
              <label for="spouseDOB">Spouse Date of Birth</label><br/>
              <input type="text" name="Spouse DOB" id="spouseDOB" tabindex="100" />
            </li>
            <li id="spouseOccupation">
              <label for="spouseOccupation">Spouse Occupation</label><br/>
              <input type="text" name="Spouse Occupation" id="spouseOccupation" tabindex="101" />
            </li>
</ul>

Here is the javascript:

document.getElementById("spouseFullName").style.display = "none";
document.getElementById("spouseDOB").style.display = "none";
document.getElementById("spouseOccupation").style.display = "none";

function imMarried() {
    if (document.getElementById('Married').selected){
        document.getElementById("spouseFullName").style.display = "block";
        document.getElementById("spouseDOB").style.display = "block";
        document.getElementById("spouseOccupation").style.display = "block";
    }
}

I do have javascript enabled.

Answer 1

has to be

function imMarried() {
    var maritalStat = document.getElementById('maritalStatus');
    if (maritalStat.options[maritalStat.selectedIndex] && maritalStat.options[maritalStat.selectedIndex].value=="Married") {
        document.getElementById("spouseFullName").style.display = "block";
        document.getElementById("spouseDOB").style.display = "block";
        document.getElementById("spouseOccupation").style.display = "block";
    }
}

and also add onchange trigger to select and remove onclick from option, i.e.:

<select name="maritalStatus" id="maritalStatus" tabindex="80" onchange="imMarried()">
...
<option id="Married" name="Married" value="Married">Married</option>