Solved

'options' is null or not an object

Posted on 2006-10-25
16
201 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:jdzemke
  • 8
  • 8
16 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 17809399
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
 

Author Comment

by:jdzemke
ID: 17810646
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
 
LVL 17

Expert Comment

by:gops1
ID: 17810804
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
 

Author Comment

by:jdzemke
ID: 17811849
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
 
LVL 17

Expert Comment

by:gops1
ID: 17813636
Can you paste the complete html. I am not able to verify with this piece of code
0
 

Author Comment

by:jdzemke
ID: 17813865
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
 
LVL 17

Expert Comment

by:gops1
ID: 17813887
But tell me how do I reproduce the error what you are getting
0
 
LVL 17

Expert Comment

by:gops1
ID: 17813918
There are no values inside <select> tag. Can I put some dummy data into it
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:jdzemke
ID: 17814334
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
 
LVL 17

Expert Comment

by:gops1
ID: 17814423
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
 

Author Comment

by:jdzemke
ID: 17814650
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
 

Author Comment

by:jdzemke
ID: 17816948
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
 
LVL 17

Accepted Solution

by:
gops1 earned 500 total points
ID: 17817009
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
 

Author Comment

by:jdzemke
ID: 17817136
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
 
LVL 17

Expert Comment

by:gops1
ID: 17817408
Strange there is nothing wrong in either case. Tell me what browser you were testing and what is the DOCTYPE
0
 

Author Comment

by:jdzemke
ID: 17818691
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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now