'options' is null or not an object

I could use some help with the following issue as soon as possible.  I posted it in the wrong section and am tryng to change it.

http://www.experts-exchange.com/Web/Q_22035709.html
jdzemkeAsked:
Who is Participating?
 
gops1Commented:
make a minor change to this line and let me know if you are still getting error.

Like this:

if (select.options[i].value.toUpperCase().indexOf(field.value.toUpperCase()) == 0)
0
 
gops1Commented:
Replace your function :

            function autoComplete (field, select, property, forcematch) {
                  var found = false;
                  for (var i = 0; i < select.options.length; i++) {
                        if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
                              found=true; break;
                        }
                  }
                  if (found) { select.selectedIndex = i; }
                  else { select.selectedIndex = -1; }
                  if (field.createTextRange) {
                        if (forcematch && !found) {
                              field.value=field.value.substring(0,field.value.length-1);
                              return;
                        }
                        var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
                        if (cursorKeys.indexOf(event.keyCode+";") == -1) {
                              var r1 = field.createTextRange();
                              var oldValue = r1.text;
                              var newValue = found ? select.options[i][property] : oldValue;
                              if (newValue != field.value) {
                                    field.value = newValue;
                                    var rNew = field.createTextRange();
                                    rNew.moveStart('character', oldValue.length) ;
                                    rNew.select();
                              }
                        }
                  }
            }

0
 
jdzemkeAuthor Commented:
I believe the change you are providing resplaces "OBDataSet_135_1" with "options".  I have tried this and continue to get the error -- 'options' is null or not an object

Normally, when I see the use of "options", people are using a static data set i.e., something like this:

<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)">
<SELECT NAME="options"
onChange="this.form.input1.value=this.options[this.selectedIndex].value">
      <OPTION VALUE="adam">adam
      <OPTION VALUE="george">george
      <OPTION VALUE="matt">matt
      <OPTION VALUE="bill">bill
      <OPTION VALUE="greg">greg
      <OPTION VALUE="bob">bob
      <OPTION VALUE="david">david
      <OPTION VALUE="ryan">ryan
</SELECT>


However, I am trying to use a dynamic dataset like this and wonder how these situation should be treated differently:

<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.OBDataSet__135_1,'value',true)">
                                                            <select size="1" name="OBDataSet__135_1" onChange="this.form.input1.value=this.options[this.selectedIndex].value">
                                                            </select></td>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
gops1Commented:
just try this code and let me know of you are facing the same problem:


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<script>
          function autoComplete (field, select, property, forcematch) {
               var found = false;
               for (var i = 0; i < select.options.length; i++) {
                    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
                         found=true; break;
                    }
               }
               if (found) { select.selectedIndex = i; }
               else { select.selectedIndex = -1; }
               if (field.createTextRange) {
                    if (forcematch && !found) {
                         field.value=field.value.substring(0,field.value.length-1);
                         return;
                    }
                    var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
                    if (cursorKeys.indexOf(event.keyCode+";") == -1) {
                         var r1 = field.createTextRange();
                         var oldValue = r1.text;
                         var newValue = found ? select.options[i][property] : oldValue;
                         if (newValue != field.value) {
                              field.value = newValue;
                              var rNew = field.createTextRange();
                              rNew.moveStart('character', oldValue.length) ;
                              rNew.select();
                         }
                    }
               }
          }

</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form method="POST" name="form1">
      <INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)">
      <SELECT NAME="options"
      onChange="this.form.input1.value=this.options[this.selectedIndex].value">
             <OPTION VALUE="adam">adam
             <OPTION VALUE="george">george
             <OPTION VALUE="matt">matt
             <OPTION VALUE="bill">bill
             <OPTION VALUE="greg">greg
             <OPTION VALUE="bob">bob
             <OPTION VALUE="david">david
             <OPTION VALUE="ryan">ryan
      </SELECT>

</form>
</body>
</html>
0
 
jdzemkeAuthor Commented:
This last set of code you provided works.  I have implemented very similar code that work from this site - http://www.mattkruse.com/javascript/autocomplete/.

However, I have not been able to bridge the gap between a static set of OPTION values and my dynamic set of values provided in OBDataSet__135_1.  The code listed below provides similar functionality and works with my dynamic set of values, so I know I can use OBDataSet__135_1 somehow, I just haven't been able to get this dynamic set of values to work with the autocomplete function.  And I would rather use the autocomplete function.

<html>

<head>
<title></title>
</head>






<style type="text/css">
body, table, tr, td {
      font-family:Verdana, Helvetica, sans-serif;
      font-size:8pt;
}

.eDocField {

       font-family: Verdana;
       font-size: 8pt;
}

.obButton {
      border-left: 1px solid black; border-top: 1px solid black;
      border-right: 2px solid black; border-bottom: 2px solid black;
       background-color: white;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 8pt; font-weight: bold
}

 li.MsoNormal
      {mso-style-parent:"";
      margin-bottom:.0001pt;
      font-size:10.0pt;
      font-family:"Times New Roman";
      margin-left:0in; margin-right:0in; margin-top:0in}
</style>


<body>

<!-- DZ added 10/18/06 to allow keyboard filter of dataset drop down -->
<script>
    var testString = "";
           
    function addChar(e) {
           
             // get keyboard code
             if (e.keyCode) {
                 code = e.keyCode;
             } else if (e.which) {
                 code = e.which;
             }
               
             // If code 8 (backspace), replace
             if (code == 8) {
                 
                   //      break;
                 //return false;
                 //history.forward();
                 testString = testString.replace(/.$/, "");
             } else {
                testString += String.fromCharCode(code);
             }
               
             re = new RegExp("^" + testString, "i");
               
             var matched = false;

             for (i = 0; i < document.form1.OBDataSet__135_1.options.length; i++) {
                 if (document.form1.OBDataSet__135_1.options[i].text.match(re)) {
                     setTimeout("document.form1.OBDataSet__135_1.selectedIndex = i", 50);
                     matched = true;
                     break;
                 }
             }
                 
             if (!matched) {
                 testString = testString.replace(/.*(.)$/, "$1");
             }
           
   }
</script>

<form method="POST" name="form1">

<!--  FIRST TAB STARTS HERE -->
<!-- Top position for all tabs should be no less than 30! -->

 <style=" position: absolute; z-index: 5; top: 117px; left: 8px; width: 457px; height: 143px">
   
  <td colspan="4" height="16" valign="top" align="left" width="367" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-width: 1; border-bottom-width: 1">
                                                      <div align="center">
                                                      <div align="left">
                                                            <table width="470">
                                                                  <tr>
                                                                        <td width="464" style="font-family: Verdana, Helvetica, sans-serif; font-size: 8pt" height="1">
                                                                        <p align="center">
                                                                        <font face="Verdana">
                                                            <input type="submit" value="Submit" name="OBBtn_Yes" class="obButton"></font></td>
                                                                  </tr>
                                                                  </table>
                                                            </div>
                                                      <div align="left">
                                                            <table border="0" width="471" id="table1">
                                                                  <tr>
                                                                        <td width="98%" colspan="2" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
                                                                        <p align="center"><b>
                                                                        <font face="Verdana" color="#5775D7">
                                                                        Individual Entry</font></b></td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td bgcolor="#D0D6F8" width="21%">
                                                                        <p align="right">
                                                                        <font face="Verdana">Individual:</font></td>
                                                                        <td bgcolor="#D0D6F8" width="77%">
                                                                        <select size="1" name="OBDataSet__135_1" id="OBDataSet__135_1" onkeydown="addChar(event);">
                                                                        </select></td>
                                                                  </tr>
                                                                  </table>
                                                            </div>
                                                                  <div align="left">
                                                            <table border="0" width="471" id="table4">
                                                                  <table width="472">
                                                                  <tr>
                                                                  <td height="1" style="border-top-width: 1px; border-bottom-width: 1px; font-family:Verdana, Helvetica, sans-serif; font-size:8pt" bgcolor="#5775D7">
                                                                        &nbsp;</td>
                                                                  </tr>
                                                                  <tr>
                                                                  <td height="1" style="border-top-width: 1px; border-bottom-width: 1px; font-family:Verdana, Helvetica, sans-serif; font-size:8pt" bgcolor="#808080">
                                                                        <p align="center">&nbsp;</td>
                                                                  </tr>
                                                                  </table>
                                                            </div></div>
  </div>

<!--  FIRST TAB STOPS HERE -->

<!--  THIRD TAB STARTS HERE -->
<!-- Top position for all tabs should be no less than 30! -->


<!--  THIRD TAB STOPS HERE -->

<!--  SECOND TAB STARTS HERE -->
0
 
gops1Commented:
Can you paste the complete html. I am not able to verify with this piece of code
0
 
jdzemkeAuthor Commented:
Below is the html/javascript code with the dynamic dataset named "OBDataSet__135_1".  This is my latest version.  I appreciate your help.


<html>

<head>
<title></title>
</head>





<!-- Form Design Author: Tyson Smith -->



<style type="text/css">
body, table, tr, td {
      font-family:Verdana, Helvetica, sans-serif;
      font-size:8pt;
}

.eDocField {

       font-family: Verdana;
       font-size: 8pt;
}

.obButton {
      border-left: 1px solid black; border-top: 1px solid black;
      border-right: 2px solid black; border-bottom: 2px solid black;
       background-color: white;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 8pt; font-weight: bold
}

 li.MsoNormal
      {mso-style-parent:"";
      margin-bottom:.0001pt;
      font-size:10.0pt;
      font-family:"Times New Roman";
      margin-left:0in; margin-right:0in; margin-top:0in}
</style>


<body>

<!-- DZ added 10/18/06 to allow keyboard filter of dataset drop down -->
<script>

//var OBDataSet__135_1 = 0;

//var select = document.getElementById ("OBDataSet__135_1");

    function autoComplete (field, select, property, forcematch) {
      var found = false;
       

//alert("field " + field.value);
//alert("select " + select.options.value);
//alert("property " + property);
//alert("forcematch " + forcematch);
//alert("index" + document.form1.OBDataSet__135_1.selectedIndex);
//alert("text" + document.form1.OBDataSet__135_1.options[0].text);

      for (var i = 0; i < select.options.length; i++) {
       //for (var i = 0; i < 4; i++) {
      if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
            found=true; break;
            }
      }
      if (found) { select.selectedIndex = i; }
      else { select.selectedIndex = -1; }
      if (field.createTextRange) {
            if (forcematch && !found) {
                  field.value=field.value.substring(0,field.value.length-1);
                  return;
                  }
            var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
            if (cursorKeys.indexOf(event.keyCode+";") == -1) {
                  var r1 = field.createTextRange();
                  var oldValue = r1.text;
                  var newValue = found ? select.options[i][property] : oldValue;
                  if (newValue != field.value) {
                        field.value = newValue;
                        var rNew = field.createTextRange();
                        rNew.moveStart('character', oldValue.length) ;
                        rNew.select();
                        }
                  }
            }
//alert("select2 " + select.OBDataSet__135_1.value);
      }


</script>

<form method="POST" name="form1">

<!--  FIRST TAB STARTS HERE -->
<!-- Top position for all tabs should be no less than 30! -->

 <style=" position: absolute; z-index: 5; top: 117px; left: 8px; width: 457px; height: 143px">
   
  <td colspan="4" height="16" valign="top" align="left" width="367" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-width: 1; border-bottom-width: 1">
                                                      <div align="center">
                                                      <div align="left">
                                                            <table width="470">
                                                                  <tr>
                                                                        <td width="464" style="font-family: Verdana, Helvetica, sans-serif; font-size: 8pt" height="1">
                                                                        <p align="center">
                                                                        <font face="Verdana">
                                                            <input type="submit" value="Submit" name="OBBtn_Yes" class="obButton"></font></td>
                                                                  </tr>
                                                                  </table>
                                                            </div>
                                                      <div align="left">
                                                            <table border="0" width="471" id="table1">
                                                                  <tr>
                                                                        <td width="98%" colspan="2" style="border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
                                                                        <p align="center"><b>
                                                                        <font face="Verdana" color="#5775D7">
                                                                        Individual Entry</font></b></td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td bgcolor="#D0D6F8" width="21%">
                                                                        <p align="right">
                                                                        <font face="Verdana">Individual:</font></td>
                                                                        <td bgcolor="#D0D6F8" width="77%">
                                                                                                <INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.OBDataSet__135_1,'value',true)">
                                                                        <select size="1" name="OBDataSet__135_1" id="OBDataSet__135_1" onChange="this.form.input1.value=this.options[this.selectedIndex].value">
                                                                          </select></td>
                                                                  </tr>
                                                                  </table>
                                                            </div>
                                                                  <div align="left">
                                                            <table border="0" width="471" id="table4">
                                                                  <table width="472">
                                                                  <tr>
                                                                  <td height="1" style="border-top-width: 1px; border-bottom-width: 1px; font-family:Verdana, Helvetica, sans-serif; font-size:8pt" bgcolor="#5775D7">
                                                                        &nbsp;</td>
                                                                  </tr>
                                                                  <tr>
                                                                  <td height="1" style="border-top-width: 1px; border-bottom-width: 1px; font-family:Verdana, Helvetica, sans-serif; font-size:8pt" bgcolor="#808080">
                                                                        <p align="center">&nbsp;</td>
                                                                  </tr>
                                                                  </table>
                                                            </div></div>
  </div>

<!--  FIRST TAB STOPS HERE -->

<!--  THIRD TAB STARTS HERE -->
<!-- Top position for all tabs should be no less than 30! -->


<!--  THIRD TAB STOPS HERE -->

<!--  SECOND TAB STARTS HERE -->



0
 
gops1Commented:
But tell me how do I reproduce the error what you are getting
0
 
gops1Commented:
There are no values inside <select> tag. Can I put some dummy data into it
0
 
jdzemkeAuthor Commented:
gops1 - That's the real issue.  I have gotten it to work if I provide some OPTION values, like the options listed below.  However, when I want to use a dynamic data set name 'OBDataSet__135_1', it doesn't work.  This is where it gets involved, but the reason why I think it can work some way is because I have gotten the OBDataSet_135_1 to work with the code listed above with the following statement in it --- document.form1.OBDataSet__135_1.  I just can't bridge the gap with the code I would like to use (autocomplete function).

<SELECT NAME="options"
     onChange="this.form.input1.value=this.options[this.selectedIndex].value">
           <OPTION VALUE="adam">adam
           <OPTION VALUE="george">george
           <OPTION VALUE="matt">matt
           <OPTION VALUE="bill">bill
           <OPTION VALUE="greg">greg
           <OPTION VALUE="bob">bob
           <OPTION VALUE="david">david
           <OPTION VALUE="ryan">ryan
     </SELECT>
0
 
gops1Commented:
Is that you want this still to work if there are no options inside <select> tag? Because I do not see any problem with your code when <options> are added.
0
 
jdzemkeAuthor Commented:
gops - bear with me, I think I might be able to clarify myself a little more.  Can you help me understand what the difference would be between the two pieces of code below called "Dynamic options list" and "Static options list".  The "Static options list" works, but the "Dynamic options list" does not, which using the autoComplete function.   I don't know how to use the dynamic dropdown list "OBDataSet__135_1" with the autoComplete, which doesn't work.


----
Dynamic options list ---- OBDataSet__135_1

<select size="1" name="OBDataSet__135_1" onChange="this.form.input1.value=this.options[this.selectedIndex].value">
</select></td>

----
Static options list

<SELECT NAME="options"
     onChange="this.form.input1.value=this.options[this.selectedIndex].value">
           <OPTION VALUE="adam">adam
           <OPTION VALUE="george">george
           <OPTION VALUE="matt">matt
           <OPTION VALUE="bill">bill
           <OPTION VALUE="greg">greg
           <OPTION VALUE="bob">bob
           <OPTION VALUE="david">david
           <OPTION VALUE="ryan">ryan
     </SELECT>
0
 
jdzemkeAuthor Commented:
This is th e part of the javascript that appears to be problematic.  It doesn't find the dataset value.

if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0)
0
 
jdzemkeAuthor Commented:
finally... I am not sure exactly why, but the following code works.  Do you know why "text" worked vs. "value"???

changed code to use "text"
------- if (select.options[i].text.toUpperCase().indexOf(field.value.toUpperCase()) == 0)
------- var newValue = found ? select.options[i].text : oldValue;



<script>

    function autoComplete (field, select, property, forcematch) {
      
        var found = false;
       
      for (var i = 0; i < select.options.length; i++) {

        if (select.options[i].text.toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
            found=true;

                break;
            }
      }


      if (found) { select.selectedIndex = i; }

      else { select.selectedIndex = -1; }

      if (field.createTextRange) {

            if (forcematch && !found) {
                  field.value=field.value.substring(0,field.value.length-1);
            return;
                  }
            var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
            if (cursorKeys.indexOf(event.keyCode+";") == -1) {
                  var r1 = field.createTextRange();
                  var oldValue = r1.text;

                  var newValue = found ? select.options[i].text : oldValue;

                  if (newValue != field.value) {
                        field.value = newValue;
                        var rNew = field.createTextRange();
                        rNew.moveStart('character', oldValue.length) ;
                        rNew.select();
                        }
                  }
            }

      }


</script>
0
 
gops1Commented:
Strange there is nothing wrong in either case. Tell me what browser you were testing and what is the DOCTYPE
0
 
jdzemkeAuthor Commented:
It's a bit of an odd application.  The application is OnBase.  And we are using the client server version of the application, vs. a light client/application server support architecure.  However, to do some customization of the application, they allow some imbedded html forms.  The imbedded html forms us IE.  There is no stated DOCTYPE in these forms.  I appreciate your perseverance.

Can you recommend a good javascript book?  Eventually, I may take what I learn with javascript and do some ajax work, so will then be looking for a good ajax resource.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.