[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 350
  • Last Modified:

Associative Array Select List Updating a Text Box

I have a form that presents a user with 10 rows of fields that the user can populate with data.  One of the fields is a select list that needs to populate a text box when changed (the default values for the select and the textbox should be "ALL").  Here is the page code (with only 2 rows to add).  Any help would be greatly appreciated.

<html>
<head>
      <title>Table Add</title>
            <LINK href="/ADC-m3-context-root/styles/intranet.css" rel=stylesheet type=text/css>            
    <script language="JavaScript1.2" type="text/javascript">
        var nrOfRows = 10;
            var currentRow = 0;
            var listArray = new Array(nrOfRows);
            for (i=0; i<nrOfRows;i++) {
              currentRow = i + 1;
                listArray[i] = new Array(2);

          // Market drop down box             
              listArray[i][0] = new Array("ALL","ABERDEEN","AGOURA","AGUADILLA","AKRON");
                listArray[i][1] = new Array("ALL","6410","8728","1260","6613");

          // do the lookup into parallel arrays
          function getData(form) {
            var selectedUsageCsa = form.UsageCsaId.options.selectedIndex[i];
            form.OriginalCompanyCode.value = listArray[selectedUsageCsa];
          }
            }; //end for loop
      </script>
        <SCRIPT language="Javascript1.2" src="/ADC-m3-context-root/scripts/Validate.js"></SCRIPT>            
    <script language="javascript">
    function myRowValidator(idx) {            
        var errorMsg = "";              
        var errorCount = 0;
        var usagecsaid = -2, originalcompanycode = null;
       
        with (document.forms[0])
        {                        
          if (document.forms[0]['Comments'][0] == null) {
            if (UsageCsaId.selectedIndex != -1) {
              usagecsaid = UsageCsaId.options[UsageCsaId.selectedIndex].value;
            }
            isexclude = IsExclude.options[IsExclude.selectedIndex].value;
            billingtype = BillingType.options[BillingType.selectedIndex].value;
            glcode = GlCode.options[GlCode.selectedIndex].value;
            overridecompanycode = OverrideCompanyCode.options[OverrideCompanyCode.selectedIndex].value;
            comments = Comments.value;
              }
          else {      
            if (UsageCsaId[idx].selectedIndex != -1) {          
              usagecsaid = UsageCsaId[idx].options[UsageCsaId[idx].selectedIndex].value;
            }
            isexclude = IsExclude[idx].options[IsExclude[idx].selectedIndex].value;
            billingtype = BillingType[idx].options[BillingType[idx].selectedIndex].value;
            glcode = GlCode[idx].options[GlCode[idx].selectedIndex].value;                                    
            overridecompanycode = OverrideCompanyCode[idx].options[OverrideCompanyCode[idx].selectedIndex].value;
            comments = Comments[idx].value;
              }
         
          if (!((usagecsaid==-1 || usagecsaid==-2) && (billingtype == -1) &&
            (glcode == -1) && (overridecompanycode ==-1) && isEmpty(comments)) )
                               {
             errorMsg += ((usagecsaid==-2) || (billingtype==-1) || (glcode==-1)
              || (overridecompanycode==-1) || isEmpty(comments)) ? "Usage CSA, Billing Type, GL Code, Override Company and Comments are required. " :"";
                 
            errorMsg += max(comments, 250) ? "" : "Comments: field length should be no more than 250. ";
                                    
          }//end if check for empty row
        }
        return errorMsg;
            }//end myRowValidator;
   
    function SubmitForm(myAction) {
      with (window.document.forms[0])
      {
        if (myAction == "Save")
        {
          if (confirm('Are you sure you want to save your updates ?'))
          {
            if (validateForm("Comments")) {  
              action="AgingCompanyOverrideExcludeTableAdd.do";//should go to frameAdd on success
              target="MainFrame";
              submit();        
            }
          }
        }
        else if (myAction == "Exit")
        {
          if (confirm('Make sure you save your changes before exiting.\n Exit ?'))
          {
             top.MainFrame.location.href='AgingCompanyOverrideExcludeTableFrameView.do';
          }
        }        
      }
      return true;
    }
    </script>
</head>

<body LEFTMARGIN=0 TOPMARGIN=0 onload="getData(document.frmMaintenance)">
<form action="" name="frmMaintenance" method="POST">
<table width="1000" border="1" cellspacing="1" cellpadding="0" align="left" bgcolor="#BEBEBE">
  <div  id="rd0" style="visibility:hidden"><tr class="row1"><td colspan="12" class="tinyred"><label id="r0"></label></td></tr></div>    
      <tr class="row1">
            <td class="tiny" align="left" width="150">
            <select name="UsageCsaId" size="1" onChange="getData(this.form)" class="tiny" style="width: 140px;">
              <option value="-1"></option>
              <option value="ALL" selected>ALL</option>
            <option value="ABERDEEN" >ABERDEEN</option>
            <option value="AGOURA" >AGOURA</option>
            <option value="AGUADILLA" >AGUADILLA</option>
            <option value="AKRON" >AKRON</option>
          </select>
            </td>
            <td class="tiny" align="left" width="50">
                  <select name="IsExclude" size="1" class="tiny" style="width: 45px;">
                        <option value="Y">Y</option>
                        <option value="N" selected>N</option>
                  </select>                                    
            </td>
            <td class="tiny" align="left" width="100">
                  <select name="BillingType" class="tiny" style="width: 90px;">
                        <option value="-1"></option>
                    <option value="ALL" selected>ALL</option>
                           <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                  </select>                        
            </td>
            <td class="tiny" align="left" width="175">
                  <select name="GlCode" class="tiny" style="width: 165px;">
                        <option value="-1" selected></option>
                    <option value="ALL">ALL</option>
                           <option value="123123456123">123 - 123456 - 123</option>
                  </select>                        
            </td>
            <td class="tiny" align="left" width="50">
                  <input type="text" name="OriginalCompanyCode" size="4" readonly>
            </td>
            <td class="tiny" align="left" width="100">
        <select name="OverrideCompanyCode" class="tiny" style="width: 90px;">
        <option value="-1" selected></option>
          <option value="1111">1111</option>
          <option value="1025">1025</option>
          <option value="1026">1026</option>
          <option value="1037">1037</option>
        </select>
            </td>
            <td class="tiny" align="left" width="250">
                  <input type="text" name="Comments" size="35" maxlength="250" class="tiny">
            </td>
      </tr>
      <tr class="row2">
            <td class="tiny" align="left" width="150">
            <select name="UsageCsaId" size="1" onChange="getData(this.form)" class="tiny" style="width: 140px;">
              <option value="-1"></option>
              <option value="ALL" selected>ALL</option>
            <option value="ABERDEEN" >ABERDEEN</option>
            <option value="AGOURA" >AGOURA</option>
            <option value="AGUADILLA" >AGUADILLA</option>
            <option value="AKRON" >AKRON</option>
          </select>
            </td>
            <td class="tiny" align="left" width="50">
                  <select name="IsExclude" size="1" class="tiny" style="width: 45px;">
                        <option value="Y">Y</option>
                        <option value="N" selected>N</option>
                  </select>                                    
            </td>
            <td class="tiny" align="left" width="100">
                  <select name="BillingType" class="tiny" style="width: 90px;">
                        <option value="-1"></option>
                            <option value="ALL" selected>ALL</option>
                           <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                  </select>                        
            </td>
            <td class="tiny" align="left" width="175">
                  <select name="GlCode" class="tiny" style="width: 165px;">
                        <option value="-1" selected></option>
                            <option value="ALL">ALL</option>
                           <option value="123123456123">123 - 123456 - 123</option>
                  </select>                        
            </td>
            <td class="tiny" align="left" width="50">
                  <input type="text" name="OriginalCompanyCode" size="4" readonly>
            </td>
            <td class="tiny" align="left" width="100">
                        <select name="OverrideCompanyCode" class="tiny" style="width: 90px;">
                         <option value="-1" selected></option>
                         <option value="1111">1111</option>
                         <option value="1025">1025</option>
                         <option value="1026">1026</option>
                         <option value="1037">1037</option>
                      </select>
            </td>
            <td class="tiny" align="left" width="250">
                  <input type="text" name="Comments" size="35" maxlength="250" class="tiny">
            </td>
      </tr>
        <tr>
            <td colspan="12">&nbsp;</td>
      </tr>
      <tr align="center"><td colspan=12>
     
        <input type="button" name="btnSave" value="Save" class="tiny"
        onClick="javascript:SubmitForm('Save');">
          &nbsp;&nbsp;
     
        <input type="button" name="btnExit" value="Exit" class="tiny"
        onClick="javascript:SubmitForm('Exit');">
    </td>
  </tr>            
</table>
</form>
</body>
</html>

Thanks,
Issac
0
irosa
Asked:
irosa
  • 2
1 Solution
 
GwynforWebCommented:
I am not sure I understand you correctly but he cells should look like this with the option and value set in each row as below  

  <td class="tiny" align="left" width="175"><select name="GlCode" class="tiny"
      style="width: 165px;" size="1">
        <option value="-1"></option>
        <option value="ALL" selected>ALL</option>
        <option value="123123456123">123 - 123456 - 123</option>
      </select> </td>
      <td class="tiny" align="left" width="50"><input type="text" name="OriginalCompanyCode"
      size="4" readonly value="ALL"> </td>
     
0
 
irosaAuthor Commented:
What I am looking for is when I select an option from the UsageCsaId, the associative value for the OriginalCompanyCode is populated.  On page load, the default values should be "ALL" for both fields.
0
 
alambresCommented:
Hi !

The options for UsageCsaId will be the same for all rows ("ALL","ABERDEEN","AGOURA","AGUADILLA","AKRON") or it'll change?

alambres
0
 
alambresCommented:
The problem is the lack indexes. Note that you got the same names for the fields in every row. So you have arrays of objects. I mean: UsageCsaId is not a concrete field, it is an array of fields. Then this one in the first row MUST be referenced by document.formName.UsageCsaId[0], document.formName.UsageCsaId[1] for the second one, and so on. (Note: another way to reference fields with the same name is by setting them an id attribute and calling them by document.getElemetnById).  This is:

function getData shold be:

function getData(f,i)
{
          f.OriginalCompanyCode[i].value = listArray[i][1][f.UsageCsaId[i].options.selectedIndex];
}

// note that I've changed the name of the form parameter for f. You should avoid to use reserved words (like form) as variables or parameters.

and shold call this function like this:
first row:
<select name="UsageCsaId" size="1" onChange="getData(this.form,0)" class="tiny" style="width: 140px;">
second row:
<select name="UsageCsaId" size="1" onChange="getData(this.form,1)" class="tiny" style="width: 140px;">
etc ...

hope it helps ya

alambres
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now