Link to home
Start Free TrialLog in
Avatar of jdzemke
jdzemke

asked on

'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.

https://www.experts-exchange.com/questions/22035709/OBDataSet-135-1-is-null-or-not-an-object.html
Avatar of gops1
gops1
Flag of United States of America image
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();
                              }
                        }
                  }
            }

Avatar of jdzemke
jdzemke

ASKER

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>
Avatar of gops1
gops1
Flag of United States of America image
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>
Avatar of jdzemke
jdzemke

ASKER

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 -->
Avatar of gops1
gops1
Flag of United States of America image
Can you paste the complete html. I am not able to verify with this piece of code
Avatar of jdzemke
jdzemke

ASKER

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 -->



Avatar of gops1
gops1
Flag of United States of America image
But tell me how do I reproduce the error what you are getting
Avatar of gops1
gops1
Flag of United States of America image
There are no values inside <select> tag. Can I put some dummy data into it
Avatar of jdzemke
jdzemke

ASKER

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>
Avatar of gops1
gops1
Flag of United States of America image
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.
Avatar of jdzemke
jdzemke

ASKER

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>
Avatar of jdzemke
jdzemke

ASKER

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)
ASKER CERTIFIED SOLUTION
Avatar of gops1
gops1
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jdzemke
jdzemke

ASKER

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>
Avatar of gops1
gops1
Flag of United States of America image
Strange there is nothing wrong in either case. Tell me what browser you were testing and what is the DOCTYPE
Avatar of jdzemke
jdzemke

ASKER

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.