I need help with the results of a select object

[andersond]

I have a form with several questions whose answers are chosen from select object. Some work and some don't. Here's an example

This works:

    var y = document.getElementById('coverageDesired'); 
    var z = y.options[y.selectedIndex].value; 
if(z=="Property ONLY"){
    document.getElementById('cellOutput05').innerHTML="Property coverage only";
    } else if(z=="Liability ONLY"){
    document.getElementById('cellOutput05').innerHTML="Liability coverage only";
    } else if(z=="Property and Liability"){
    document.getElementById('cellOutput05').innerHTML="Both Property and Liability coverage";
    }
 

This doesn't work:

    var y = document.getElementById('bankruptcy'); 
            var z = y.options[y.selectedIndex].value;
    if(z=="YES"){
    status="REFERRED";
    document.getElementById('cellOutput04').innerHTML="Risk has had a previous bankruptcy";
    } else if(z=="NO"){
    document.getElementById('cellOutput04').innerHTML="Risk has never filed bankruptcy";
    }    
 

Can anyone show me why the second one does not write the text to the screen like the first one does?

[acoder]

Can you show the corresponding HTML code for these elements?

Also, when you say it doesn't work, can you elaborate? Do you get any errors?

[andersond]

Here's the HTML for the drop down box that works:

<table border="0" width="100%" id="tableQuestion5" onChange="javascript:question('5')" cellpadding="0" style="visibility:hidden">
                <tr>
                  <td bgcolor="#003300" style="padding-right: 5px" width="55%">
                  <p align="right">
                  <font color="#FFFFFF" size="2" face="Arial Narrow"><b>
                  Coverage(s) 
                  desired:</b></font></td>
                  <td width="45%" style="border: 1px solid #003300; padding-left: 3px; padding-top: 3px; padding-bottom: 3px">
                  <select size="1" name="coverageDesired" id="coverageDesired" onChange="javascript:question('5')" style="font-family: Arial Narrow; font-size: 10pt; color: #000080; border: 1px solid #003300">
                  <option>Select Coverages</option>
                  <option value="Property ONLY">Property ONLY</option>
                  <option value="Liability ONLY">Liability ONLY</option>
                  <option value="Property and Liability">Property and Liability
                  </option>
                  </select></td>
                </tr>
              </table>
 

And here's the HTML for the drop down that doesn't work:

<table border="0" width="740" id="tableQuestion4" style="visibility:hidden" cellpadding="0">
              <tr>
                  <td bgcolor="#003300" style="padding-right: 5px" width="55%">
                  <p align="right"><b>
                  <font color="#FFFFFF" face="Arial Narrow" size="2">Has the 
                  risk ever filed bankruptcy?</font></b></td>
                  <td width="45%" style="border: 1px solid #003300; padding-left: 3px; padding-top: 3px; padding-bottom: 3px">
                  <select size="1" name="bankruptcy" id="bankruptcy" onChange="javascript:question('4')" style="font-family: Arial Narrow; font-size: 10pt; color: #000080">
                  <option>Select</option>
                  <option value="NO             ">NO</option>
                  <option value="YES           ">YES</option>
                  </select></td>
                </tr>
            </table>
 

By "works" and "doesn't work" I mean that it does or does not display the message that corresponds to the user's choice. There are no error messages.

[acoder]

In the onchange, you don't need the "javascript:" protocol.

Can you also post the cellOutput4 HTML code.

PS. use [code] tags rather than <code> tags.

[phvfl]

There are trailing spaces on the options that do not work:

alert("no"=="no"); /* true */
alert("no" == "no   "); /* false */

[acoder]

That's correct. Strange I didn't notice that earlier.

[xNephilimx]

please, don't use the onchange attribute of the select, unobtrusive javascript is alwasy for the best

var bankruptcy = document.getElemebtById('bankruptcy');
bankruptcy.onchange = function() {
   //use the this keyword to refer to bankruptcy select
}
 

Anyways i think the best solution is to use jquery, it really simplifies your code making it cleaner and shorter.

$('#bankruptcy').change(function(e) {
   //use the this keyword ( or $(this) if you want extended functionality ) to refer to bankruptcy select
});
 

[andersond]

Here's the cell output code

<tr>
                  <td height="10" id="cellOutput01" width="50%"></td>
                  <td height="10" id="cellOutput06" width="50%" colspan="1"></td>
                </tr>
 
                <tr>
                  <td height="10" id="cellOutput02" width="50%"></td>
                  <td height="10" id="cellOutput07" width="50%" colspan="1"> </td>
                </tr>
                <tr>
                  <td height="10" id="cellOutput03" width="50%"></td>
                  <td height="10" id="cellOutput08" width="50%" colspan="1"></td>
                </tr>
                <tr>
                  <td height="10" id="cellOutput04" width="50%"></td>
                  <td height="10" id="cellOutput09" width="50%" colspan="1"></td>
                </tr>
                <tr>
                  <td height="10" id="cellOutput05" width="50%"></td>
                  <td height="10" id="cellOutput10" width="50%" colspan="1"></td>
 

the trailing blanks that appear in the posted code do not exist in the actual code.

[andersond]

Apologies! I was looking in the wrong place for the trailing blanks. Once they were eliminated everything worked. Thanks to everyone for your help.