Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

'options' is null or not an object

Posted on 2006-10-25
16
Medium Priority
?
214 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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
 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

604 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