Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bug in IEy and IE8

    I have a javascript on a page which dynamically creates dropdown boxes from an array of questions. Once a user selects on question the next dropdown box will not have the previously asked questions available. This script works perfectly in FF but in IE there is an issue. The issue happens after the first time through. The user select all boxes and hits the button below, once the user gets the the next page if there is a problem you hit that button and it takes you back to the page that creates the dropdown boxes. The problem is in IE the boxes are being filled in and they shouldn't be because they should be clearing out the selected item in the drop down box.
    Here is the page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- file: oowsetup.htm (USER PAGE) -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Internet Account Management</title>
    <script language="JavaScript1.1" type="text/javascript">
    /*====================================*/
    /* Global Variables used on all pages */
    /*====================================*/
    var style="style1.css";
    var DE_CGI_DIR = "/cpsoa";
    var errors=new Array(
    "");
    
    var selectedKeys = new Array(
    "",
    "",
    "",
    "",
    ""
    );
    
    var challengePhraseText = new Array(
    "What is your mother's maiden name?",
    "What is your father's middle name?",
    "What was the name of your favorite childhood pet?",
    "What was the make of your first car?",
    "What was the name of your closest childhood friend?",
    "What was the name of the elementary school you attended?",
    "In what city were you born?",
    "What was your high school mascot?",
    "What day of the month is your mother's birthday(##)?",
    "What instrument do you play?",
    ""
    );
    var challengePhraseKeys = new Array(
    "437571",
    "437580",
    "437572",
    "437573",
    "437574",
    "437575",
    "437576",
    "437577",
    "437578",
    "437579",
    ""
    );
    var listNames = new Array(
       "DE_OOW_SEL_KEY_Q1", "DE_OOW_SEL_KEY_Q2", "DE_OOW_SEL_KEY_Q3", "DE_OOW_SEL_KEY_Q4", "DE_OOW_SEL_KEY_Q5"
    );
    
    function createDropDown(name)
    {
       document.write('<select id="' + name +'" name="' + name + '" onchange="adjustLists()">\n');
           document.write('  <option value=" "></option>\n');
       document.write('</select>\n');
    }
    
    function firstTimeSetup ()
    {
       var found;                    /* true if a question is found in another list */
       var idx;                      /* current index for adding options to the drop down box */
       var i;                        /* Loop variables */
       var j;
       var k;
       var selection;                /* The index into the drop down for the current selection */
       var selectElem;               /* The drop down box */
    
    /*
      this.targets[targetIndex].options[this.targets[targetIndex].options.length] = new Option(text, value, false, selected);
    +        if (selected && !this.targets[targetIndex].multiple) {
    +          this.targets[targetIndex].selectedIndex = this.targets[targetIndex].options.length-1;
    +        }
    */
    
       /*
        *  for each drop-down build it's array, withholding selected items from other lists,
        *  but allowing its own
        */
       for (i = 0; i < listNames.length; i++) {
          /* Clear out the drop down box */
          selectElem = document.getElementById(listNames[i]);
          selectElem.options.length = 0;
          idx = 0;
    
          /* Add the blank selection to the top of the list */
          if (selectedKeys[i] != '') {
             selectElem.options[idx] = new Option('', '', false, false);
          }
          else {
             selectElem.options[idx] = new Option('', '', false, true);
             selectElem.selectedIndex = selectElem.options.length - 1;
          }
          idx++;
    
          /* Now check each question ... */
          found = 0;
          for (j = 0; j < challengePhraseKeys.length - 1; j++) {
    
          	 /* See if any other list excepting this one has already used this question */
             found = 0;
             for (k = 0; k < listNames.length; k++) {
                if (k != i && selectedKeys[k] == challengePhraseKeys[j]) {
                   found = 1;
                   break;
                }
             }
    
             /* if not, we can add it to the current list */
             if (found == 0) {
             	/* add it as selected if that is the case */
    		    if (challengePhraseKeys[j] == selectedKeys[i]) {
                   selectElem.options[idx] = new Option(challengePhraseText[j], challengePhraseKeys[j], false, true);
                   selectElem.selectedIndex = selectElem.options.length - 1;
    			}
    			else {
                   selectElem.options[idx] = new Option(challengePhraseText[j], challengePhraseKeys[j], false, false);
    			}
    			idx++;
             }
          }
       }
    }
    
    function adjustLists()
    {
       var found;                    /* true if a question is found in another list */
       var idx;                      /* current index for adding options to the drop down box */
       var i;                        /* Loop variables */
       var j;
       var k;
       var selection;                /* The index into the drop down for the current selection */
       var selectKeys = new Array(); /* Array of selected keys for each list */
       var selectElem;               /* The drop down box */
    
       /* build an array with an element for each drop-down holding its selected item */
       for (i = 0; i < listNames.length; i++) {
          selectElem = document.getElementById(listNames[i]);
          selection = selectElem.selectedIndex;
          if (selection > 0) {
             selectKeys[i] = selectElem.options[selection].value;
    		 
          }
          else {
             selectKeys[i] = '';
          }
       }
    
       /*
        *  for each drop-down build it's array, withholding selected items from other lists,
        *  but allowing its own
        */
       for (i = 0; i < listNames.length; i++) {
          /* Clear out the drop down box */
          selectElem = document.getElementById(listNames[i]);
          selectElem.options.length = 0;
          idx = 0;
          /* Add the blank selection to the top of the list */
    //	  alert('selectkeys['+i+'].length='+selectKeys[i].length+' && selectKeys['+i+'][0]='+selectKeys[i][0]);
          if (!(selectKeys[i].length && selectKeys[i][0] >= '0' && selectKeys[i][0] <= '9')) {
             selectElem.options[idx] = new Option('', '', true, true);
          }
          else {
    		 selectElem.options[idx] = new Option('', '');
          }
          idx++;
    
          /* Now check each question ... */
          found = 0;
          for (j = 0; j < challengePhraseKeys.length - 1; j++) {
    
          	 /* See if any other list excepting this one has already used this question */
             found = 0;
             for (k = 0; k < listNames.length; k++) {
                if (k != i && selectKeys[k] == challengePhraseKeys[j]) {
                   found = 1;
                   break;
                }
             }
    
             /* if not, we can add it to the current list */
             if (found == 0) {
             	/* add it as selected if that is the case */
    		    if (challengePhraseKeys[j] == selectKeys[i]) {
                   selectElem.options[idx] = new Option(challengePhraseText[j], challengePhraseKeys[j], true, true);
    			}
    			else {
                   selectElem.options[idx] = new Option(challengePhraseText[j], challengePhraseKeys[j]);
    			}
    			idx++;
             }
          }
       }
    }
    </script>
    
    <link href="/cpsoa/css/style1.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/cpsoa/local-js/site.js"></script>
    <script type="text/javascript" src="/cpsoa/js/global.js"></script>
    <script type="text/javascript" src="/cpsoa/local-js/menus.js"></script>
    </head>
    <body>
    <table width="750px" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="3">
    	<table border="0" cellspacing="0" cellpadding="0" class="tm_table">
            <tbody>
            <tr>
              <td colspan="3"><img src="/cpsoa/shared_images/default.jpg" alt="" border="0" /></td>
    		</tr>
            <tr>
              <td colspan="3" class="tm_spacerhoriz"><img src="/cpsoa/images/spacer.gif" alt="" width="750" height="1" border="0" /></td>
    		</tr>
            <tr>
              <td class="tm_menubg"><script type="text/javascript">imageStyle("tm_left.gif", 'alt=\"\" width=\"140\" height=\"20\" border=\"0\"');</script></td>
              <td class="tm_menubg"><script type="text/javascript">imageStyle("tm_curve.gif", 'alt=\"\" width=\"23\" height=\"20\" border=\"0\"');</script></td>
              <td width="587" class="tm_menubg">&nbsp;
    			</td>
    		</tr>
    		</tbody>
    	  </table>
    	</td>
      </tr>
      <tr>
        <td width="151" valign="top">
    	<!-- Left navigation -->
    	&nbsp;
    	</td>
        <td width="12" >&nbsp;</td>
        <td width="587" id="content">
    <!-- Begin Body Content -->
            <form action="/cpsoa/cgi-bin/cgi_chip" method="post" autocomplete="off">
    		    <input type="hidden" name="DE_WEB_PAGE_ID" value="oowsetup" />
                <input type="hidden" name="DE_USER_VALUE" value="436599" />
            	<input type="hidden" name="DE_CHECKED" value="Y" />
    			<input type="hidden" name="DE_CASE_COUNT" value="5" />
    			<input type="hidden" name="DE_SRVC_CD" value="Login" />
                <input type="hidden" name="DE_SELECTED5" value="" />
            <h1>Security Authentication</h1>
     <script language="JavaScript1.1" type="text/javascript">ErrorText();</script>
      		<p>For additional security, please enter and confirm each answer to the following questions.  As noted below, you should limit the use of spaces, hyphens and special characters in your Challenge Answer.</p>
    
    <p>Each time you log in and for any future changes you may request online, you will be required to enter the answer to one of these questions exactly as you create it here.</p> 
            <table class="action-table"  border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th colspan="3">&nbsp;</th>
          </tr>
        </thead>
        <tr class="odd">
          <th id="">Challenge Question: </th>
          <td colspan="2"><br />
         <script language="JavaScript1.1" type="text/javascript">createDropDown(listNames[0]);</script><script language="JavaScript1.1" type="text/javascript">fixImage('' );</script></td>
    
        </tr>
         <tr class="even">
          <th>Challenge Question Answer:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_FRST_ANS1" value="" /> <script language="JavaScript1.1" type="text/javascript">fixImage('' );</script>      </td>
        </tr>
         <tr class="even">
          <th>Answer Confirmation:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_SCND_ANS1" value="" /></td>
        </tr>    
      </table>
      
     <!-- Second Question Table --> 
      <table class="action-table"  border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th colspan="3">&nbsp;</th>
          </tr>
        </thead>
        <tr class="odd">
          <th id="">Challenge Question: </th>
          <td colspan="2"><br />
         <script language="JavaScript1.1" type="text/javascript">createDropDown(listNames[1]);</script><script language="JavaScript1.1" type="text/javascript">fixImage('' );</script></td>
    
        </tr>
         <tr class="even">
          <th>Challenge Question Answer:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_FRST_ANS2" value="" /> <script language="JavaScript1.1" type="text/javascript">fixImage('' );</script>      </td>
        </tr>
         <tr class="even">
          <th>Answer Confirmation:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_SCND_ANS2" value="" /></td>
        </tr>    
      </table>
      
      
       <!-- Third Question Table --> 
      <table class="action-table"  border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th colspan="3">&nbsp;</th>
          </tr>
        </thead>
        <tr class="odd">
          <th id="">Challenge Question: </th>
          <td colspan="2"><br />
         <script language="JavaScript1.1" type="text/javascript">createDropDown(listNames[2]);</script><script language="JavaScript1.1" type="text/javascript">fixImage('' );</script></td>
    
        </tr>
         <tr class="even">
          <th>Challenge Question Answer:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_FRST_ANS3" value="" /> <script language="JavaScript1.1" type="text/javascript">fixImage('' );</script>      </td>
        </tr>
         <tr class="even">
          <th>Answer Confirmation:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_SCND_ANS3" value="" /></td>
        </tr>    
      </table>
      
         <!-- Fourth Question Table --> 
      <table class="action-table"  border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th colspan="3">&nbsp;</th>
          </tr>
        </thead>
        <tr class="odd">
          <th id="">Challenge Question: </th>
          <td colspan="2"><br />
         <script language="JavaScript1.1" type="text/javascript">createDropDown(listNames[3]);</script><script language="JavaScript1.1" type="text/javascript">fixImage('' );</script></td>
    
        </tr>
         <tr class="even">
          <th>Challenge Question Answer:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_FRST_ANS4" value="" /> <script language="JavaScript1.1" type="text/javascript">fixImage('' );</script>      </td>
        </tr>
         <tr class="even">
          <th>Answer Confirmation:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_SCND_ANS4" value="" /></td>
        </tr>    
      </table>
      
      
           <!-- Fifth Question Table --> 
      <table class="action-table"  border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th colspan="3">&nbsp;</th>
          </tr>
        </thead>
        <tr class="odd">
          <th id="">Challenge Question: </th>
          <td colspan="2"><br />
         <script language="JavaScript1.1" type="text/javascript">createDropDown(listNames[4]);</script><script language="JavaScript1.1" type="text/javascript">fixImage('' );</script></td>
    
        </tr>
         <tr class="even">
          <th>Challenge Question Answer:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_FRST_ANS5" value="" /> <script language="JavaScript1.1" type="text/javascript">fixImage('' );</script>      </td>
        </tr>
         <tr class="even">
          <th>Answer Confirmation:</th>
          <td colspan="2"><input type="text" maxlength="50" name="DE_OOW_SCND_ANS5" value="" /></td>
        </tr>    
      </table>
      <script language="JavaScript1.1" type="text/javascript">adjustLists();</script>
    
    		            <hr class="borderline" />
              <table style="margin-bottom: 10px" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="align-center">
    			<input type="hidden" id="IEfix1" name="DE_WEB_COMMAND" value="" />
    			<input name="DE_WEB_COMMAND" type="image" class="button2" title="Submit" onclick="imgClick('IEfix1',this.value);" value="Submit" src="/cpsoa/btn-images/submit.gif" alt="[Submit]" align="middle" />			  
    </td>
                </tr>
              </table>                    
    <!-- End Body Content -->
    </form>
    <div align="center" id="boxContainer">
    <fieldset>
      <legend>Hot Tip</legend>
    	<p>You will be required to enter the answer to one of these questions exactly as you create it here.  You should limit the use of spaces, hyphens and special characters in your answer.</p>
     </fieldset>
     </div>
    	</td>
      </tr>
    </table>
    </body>
    </html>
    As you see the selectedKeys array is null and is shouldn't be filling in the challengePhraseText array. I am getting the first value in that array on all of the selected values.

    This is happening in IE7 and IE8
    Last edited by smsulliva; 06-22-2009 at 08:53 PM. Reason: Noting this happens in IE7 since I put the wrong value in the heading.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •