JavaScript Forum

**Sleeping Troll** · 08:15 PM

This is my "script"

Code:

 
while (Column <= Columns)
 {
 alert (Title[Column]);
 alert (document.getElementById(Title[Column]));
 Column = Column + 1
 }

The first alert returns "ClientID"
The second alert returns null
I believe that Title[Column] is losing the double quotes in the parsing.
resulting in

Code:

 
alert (document.getElementById(ClientID));

instead of

Code:

 
alert (document.getElementById("ClientID"));

Can anyone shed some light on this dilema?

**JeremyMiller** · 04-05-2009, 07:43 PM

What is the object "ClientID"? A text input? If so, then you need document.getElementById(Title[Column]).value

**Sleeping Troll** · 04-05-2009, 10:07 PM

That would generate an error since the reference is null, I would like to change the value of the element but cannot reference it. I just need the reference to work for now.

**JeremyMiller** · 04-05-2009, 10:09 PM

Can you post the HTML this is reading?

**Sleeping Troll** · 09:50 AM

This html is server generated

HTML Code:

<html>
<head>
<script type='text/javascript'>
var Columns;
var Column;
var Records;
var Record;
var Title = [];
var Ref;
var ClientID = [];
Title[0] = "ClientID"var Cycle = [];
Title[1] = "Cycle"var StoreName = [];
Title[2] = "StoreName"var Address = [];
Title[3] = "Address"var City = [];
Title[4] = "City"var ST = [];
Title[5] = "ST"var Zip = [];
Title[6] = "Zip"var Phone = [];
Title[7] = "Phone"var Ext = [];
Title[8] = "Ext"var Cell = [];
Title[9] = "Cell"var Manager = [];
Title[10] = "Manager"var Notes = [];
Title[11] = "Notes"ClientID[0] = '1';
Cycle[0] = '0';
StoreName[0] = 'Handy Foods #62';
Address[0] = '9308 Balm Riverview Rd.';
City[0] = 'Riverview';
ST[0] = 'FL';
Zip[0] = '';
Phone[0] = '(813) 677-7294';
Ext[0] = '';
Cell[0] = '';
Manager[0] = 'Joe';
Notes[0] = 'This is a test ';
ClientID[1] = '2';
Cycle[1] = '0';
StoreName[1] = 'Tara House';
Address[1] = '4418 N. Hale Ave.';
City[1] = 'Tampa';
ST[1] = 'FL';
Zip[1] = '33614';
Phone[1] = 'None';
Ext[1] = '';Cell[1] = '';
Manager[1] = 'Emma';
Notes[1] = 'This is another test.';
Columns = '12';
Column = 0;
Records = '0';
Record = 0;
function SetValues()
    {
        while (Column <= Columns)
            {
            if (document.Input(Column))
                {
                    document.Input(Column).value = "Test";
                }
            Column = Column + 1
            }
        }
</script>
<link rel="stylesheet" type="text/css" href="../CSS/Hawks.css">
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=A4n80DTV34GBP2hnFN5HjI9A9FlAUeOR2VCyqVNL6dJr2wt86R1aRUy59b2rTvXmGA"></script>
<script type="text/javascript" src="Clients.js"></script>
</head>
<body onLoad="javascript:SetValues()">
<div align="center">
<span class="style6">Hawks</span>
<form name="Main" id="Main" action=""/>
<span class="style2">Clients</span>
<div id="form" align="center">
    <table border="0" cellspacing="1"  bgcolor="#00FFFF">
        <tr>
            <td  nowrap colspan="2" align="left">
<div align="left" class="style1">
                    <div align="center" class="style4"></div>
                            <div class="style8"></div>
            </div>
</td>
            <td rowspan="9">
<div id="map" align="center">
</div>
</td>
        </tr> 
       <tr>
            <td  nowrap align="left"><strong>Store Name: </strong></td> 
           <td  nowrap align="right"><div align="left">
                    <input size="32" type="text" id="Input" name="Input" value="test"/>
            </div></td>
        </tr> 
       <tr>
            <td nowrap align="left"><strong>Address:</strong></td>
            <td nowrap align="right"><div align="left">
                    <input size="32" type="text" id="Input" name="Input" value="test" onKeyup="GetMap()"/>
            </div></td>
        </tr>
        <tr> 
           <td nowrap align="left"><strong>City:</strong></td>
            <td align="right" nowrap><div align="left">
                    <input size="13" type="text" id="Input" name="Input" onKeyup="GetMap()" value="" maxlength="32"/>
                    <input size="1" type="text" id="Input" name="Input" maxlength="2" onKeyUp="GetMap()" value=""/>
                    <input size="5" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
                        </tr>
        <tr>
            <td nowrap align="left"><strong>Manager(s):</strong></td>
            <td nowrap align="right"><div align="left">                    <input size="32" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
            <td nowrap align="left"><strong>Phone:</strong></td>
            <td nowrap><div align="left">
                    <input size="14" type="text" id="Input" name="Input" value=""/>
                    <strong>Ext:</strong>
                <input size="6" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
            <td nowrap align="left"><strong>Cell / Other:</strong></td>
            <td nowrap><div align="left">
                    <input size="32" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
            <td colspan="2" align="left" nowrap><div align="center"><strong>Notes:</strong>
            </div>
                <div align="center">
                   <textarea id="Notes" name="Notes" rows="3" cols="32"></textarea>
            </div></td>
        </tr>
    </table></div><div id="Message"></div></form><div id="controls">
    <table border="1" cellpadding="2" cellspacing="3">
        <td nowrap height="39" bgcolor="#00FF00">
                    <input title="First Record" type="button" value="|<" name="First" onClick="Navigate(this.name)">
                    <input title="Previous Record" type="button" value="<" name="Previous" onClick="Navigate(this.name)">
                    <input title="Next Record" type="button" value=">" name="Next" onClick="Navigate(this.name)">
                    <input title="Last Record" type="button" value=">|" name="Last" onClick="Navigate(this.name)">
        </td>        <td nowrap bgcolor="#00FF00">
                    <input title="New Record" type="button" value="*" name="New" onClick="Handler(this.name,'Create new record?')">
                    <input title="Sort by current field" type="button" value="!" id="Sort" name="Sort" onClick="Handler(this.name,'')">
        </td>
        <td nowrap bgcolor="#FF0000" class="style3">
                    <input title="Save Record" type="button" value="Save" name="Save" onClick="Handler(this.name,'Save this record?')">
                    <input title="Delete Record" type="button" value="Delete" name="Delete" onClick="Handler(this.name,'')">
        </td>
        <td nowrap bgcolor="#CCCCCC" class="style3">
                    <input title="Return to Main Menu" type="button" value="Done" name="Done" onClick="Handler(this.name,'')">
                    <input title="Clear Form" type="button" value="Clear" name="Clear" onClick="Handler(this.name,'')">
        </td>
    </table>
</div>
</div>
</body>
</html>

**wayfarer07** · 04-06-2009, 12:54 PM

you have multiple
id="Input"
IDs need to be unique

**Sleeping Troll** · 07:27 AM

Yes I do need unique ID's, however ID's do not HAVE to be unique... at any rate they were unique previously, please understand my code has changed as I am desperately attacking this problem from all sides. Some of the values are to be handled in differing ways (ClientID) for example is a autonumber value in mysql. I cannot accomplish any of this however until I can return a reference to the elements via an array in getElementById. I apologise for this code as it is not a good example of what I am trying to accomplish.

This is the original code:

Code:

 
while (Column <= Columns)
{
alert (Title[Column]);
alert (document.getElementById(Title[Column]));
Column = Column + 1
}

In this code the first alert returns "ClientID" (with quotes), the second alert returns the reference as null. "ClientID" is the id of a div, if I could get a reference I could then check if it were an input via a tag etc., Since it is a div I would write the "ClientID" as "innerHTML", When an input is encountered I would write the "value" as for example if the id = "StoreName" returned a reference to an input the value "Joe's Market" would be written as the value for the input. The test might be ' if (document.getElementById(Title[Column]).value)' or ' if (document.getElementById(Title[Column]).tag = "input" ' etc.)

Overall I am pulling in a recordset and creating javascript vars for it. which allows the user to then browse and edit records without needing to reconnect to server except to save changes. This script needs to work with any dataset as I wish to use it with many different forms/datasets, hence the need to return a reference via an array var with getElementById.

You might be thinking I should be using XML, that is a mute point... I have no problems with pulling in the recordset and assigning the vars, just with referencing the form elements. The recordset is not huge and is easily accomodated by the header.

Thank you both for your attention to this problem.

P.S. security is not an issue with this site, it is an intranet.

**wayfarer07** · 10:21 AM

I tried to set up a test-case based on the example you gave above, but changed your lines:

Code:

function SetValues()
    {
        while (Column <= Columns)
            {
            if (document.Input(Column))
                {
                    document.Input(Column).value = "Test";
                }
            Column = Column + 1
            }

        }

To:

Code:

function SetValues()
{
    while (Column <= Columns)
    {
        alert (Title[Column]);
        alert (document.getElementById(Title[Column]));
        Column = Column + 1
    }
}

Exactly as you said in your next post.

There were some dropped semi-colons above that function, where the lines were running together. For example:

Code:

Title[0] = "ClientID"var Cycle = [];
Title[1] = "Cycle"var StoreName = [];
Title[2] = "StoreName"var Address = [];
Title[3] = "Address"var City = [];
Title[4] = "City"var ST = [];

Should be:

Code:

Title[0] = "ClientID";
var Cycle = [];
Title[1] = "Cycle";
var StoreName = [];
Title[2] = "StoreName";
var Address = [];
Title[3] = "Address";
var City = [];
Title[4] = "City";
var ST = [];

Once I fixed these things, everything worked, but there was also the problem that most of the IDs that were being searched for were not present in the HTML. I went ahead and added a <div id="ClientID"></div> at the very bottom of the page. It alerted that it was a DIV html object. There was also a TEXTAREA ("Notes") which also alerted correctly, and I think was the only one actually present.

Here's the complete code that I made work:

Code:

<html>
<head>
<script type='text/javascript'>
var Columns;
var Column;
var Records;
var Record;
var Title = [];
var Ref;
var ClientID = [];
Title[0] = "ClientID";
var Cycle = [];
Title[1] = "Cycle";
var StoreName = [];
Title[2] = "StoreName";
var Address = [];
Title[3] = "Address";
var City = [];
Title[4] = "City";
var ST = [];
Title[5] = "ST";
var Zip = [];
Title[6] = "Zip"
var Phone = [];
Title[7] = "Phone";
var Ext = [];
Title[8] = "Ext";
var Cell = [];
Title[9] = "Cell";
var Manager = [];
Title[10] = "Manager";
var Notes = [];
Title[11] = "Notes";
ClientID[0] = '1';
Cycle[0] = '0';
StoreName[0] = 'Handy Foods #62';
Address[0] = '9308 Balm Riverview Rd.';
City[0] = 'Riverview';
ST[0] = 'FL';
Zip[0] = '';
Phone[0] = '(813) 677-7294';
Ext[0] = '';
Cell[0] = '';
Manager[0] = 'Joe';
Notes[0] = 'This is a test ';
ClientID[1] = '2';
Cycle[1] = '0';
StoreName[1] = 'Tara House';
Address[1] = '4418 N. Hale Ave.';
City[1] = 'Tampa';
ST[1] = 'FL';
Zip[1] = '33614';
Phone[1] = 'None';
Ext[1] = '';Cell[1] = '';
Manager[1] = 'Emma';
Notes[1] = 'This is another test.';
Columns = '12';
Column = 0;
Records = '0';
Record = 0;
function SetValues()
    {
while (Column <= Columns)
{
alert (Title[Column]);
alert (document.getElementById(Title[Column]));
Column = Column + 1
}
        }
</script>
<link rel="stylesheet" type="text/css" href="../CSS/Hawks.css">
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?

v=3.8&appid=A4n80DTV34GBP2hnFN5HjI9A9FlAUeOR2VCyqVNL6dJr2wt86R1aRUy59b2rTvXmGA"></script>
<script type="text/javascript" src="Clients.js"></script>
</head>
<body onload="javascript:SetValues()">
<div align="center">
<span class="style6">Hawks</span>
<form name="Main" id="Main" action=""/>
<span class="style2">Clients</span>
<div id="form" align="center">
    <table border="0" cellspacing="1"  bgcolor="#00FFFF">
        <tr>
            <td  nowrap colspan="2" align="left">
<div align="left" class="style1">
                    <div align="center" class="style4"></div>
                            <div class="style8"></div>
            </div>
</td>
            <td rowspan="9">
<div id="map" align="center">
</div>
</td>
        </tr> 
       <tr>
            <td  nowrap align="left"><strong>Store Name: </strong></td> 
           <td  nowrap align="right"><div align="left">
                    <input size="32" type="text" id="Input" name="Input" value="test"/>
            </div></td>
        </tr> 
       <tr>
            <td nowrap align="left"><strong>Address:</strong></td>
            <td nowrap align="right"><div align="left">
                    <input size="32" type="text" id="Input" name="Input" value="test" onKeyup="GetMap

()"/>
            </div></td>
        </tr>
        <tr> 
           <td nowrap align="left"><strong>City:</strong></td>
            <td align="right" nowrap><div align="left">
                    <input size="13" type="text" id="Input" name="Input" onKeyup="GetMap()" value="" 

maxlength="32"/>
                    <input size="1" type="text" id="Input" name="Input" maxlength="2" onKeyUp="GetMap

()" value=""/>
                    <input size="5" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
                        </tr>
        <tr>
            <td nowrap align="left"><strong>Manager(s):</strong></td>
            <td nowrap align="right"><div align="left">                    <input size="32" type="text" 

id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
            <td nowrap align="left"><strong>Phone:</strong></td>
            <td nowrap><div align="left">
                    <input size="14" type="text" id="Input" name="Input" value=""/>
                    <strong>Ext:</strong>
                <input size="6" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
            <td nowrap align="left"><strong>Cell / Other:</strong></td>
            <td nowrap><div align="left">
                    <input size="32" type="text" id="Input" name="Input" value=""/>
            </div></td>
        </tr>
        <tr>
            <td colspan="2" align="left" nowrap><div align="center"><strong>Notes:</strong>
            </div>
                <div align="center">
                   <textarea id="Notes" name="Notes" rows="3" cols="32"></textarea>
            </div></td>
        </tr>
    </table></div><div id="Message"></div></form><div id="controls">
    <table border="1" cellpadding="2" cellspacing="3">
        <td nowrap height="39" bgcolor="#00FF00">
                    <input title="First Record" type="button" value="|<" name="First" 

onClick="Navigate(this.name)">
                    <input title="Previous Record" type="button" value="<" name="Previous" 

onClick="Navigate(this.name)">
                    <input title="Next Record" type="button" value=">" name="Next" onClick="Navigate

(this.name)">
                    <input title="Last Record" type="button" value=">|" name="Last" onClick="Navigate

(this.name)">
        </td>        <td nowrap bgcolor="#00FF00">
                    <input title="New Record" type="button" value="*" name="New" onClick="Handler

(this.name,'Create new record?')">
                    <input title="Sort by current field" type="button" value="!" id="Sort" name="Sort" 

onClick="Handler(this.name,'')">
        </td>
        <td nowrap bgcolor="#FF0000" class="style3">
                    <input title="Save Record" type="button" value="Save" name="Save" onClick="Handler

(this.name,'Save this record?')">
                    <input title="Delete Record" type="button" value="Delete" name="Delete" 

onClick="Handler(this.name,'')">
        </td>
        <td nowrap bgcolor="#CCCCCC" class="style3">
                    <input title="Return to Main Menu" type="button" value="Done" name="Done" 

onClick="Handler(this.name,'')">
                    <input title="Clear Form" type="button" value="Clear" name="Clear" 

onClick="Handler(this.name,'')">
        </td>
    </table>
</div>
</div>
<div id="ClientID">&nbsp;</div>
</body>
</html>

It is worth noting that you don't need the javascript: pseudoprotocol on an onload event to make it work (<body onload="javascript:SetValues()">). <body onload="SetValues()"> will do just fine. However, I'm a big believer in seperating behavior from the HTML, which makes for a much cleaner presentation. You can easily do this instead, in the head:

Code:

<script>
window.onload=SetValues;
</script>

Note that the parenthesis() are not actually required. In fact, when they are used, it degrades the "this" keyword (though this doesn't actually apply to this case). If I were you, I wouldn't, for the most part, be attaching events like "onclick" inline either, but you can save all of this for another day.

**Sleeping Troll** · 04-07-2009, 05:13 PM

I owe Chris some talkupation and I will have to give him his due before I can add to yours...

Very peceptive about the ID's that don't exist, however I had been testing for a null return until an existing ID was found and still it did not work. Hopefully I will find the reason in your working code.

Thx for the tip on window.onload, I will give it a go.

**Sleeping Troll** · 05:58 PM

Well, I belive you when you say the html worked, however I still get nulls. I think the quotes are being culled by server side script, no, if that were the case the first alert would have no quotes... My head hurts.

**wayfarer07** · 04-07-2009, 06:06 PM

What I would do if I were you, is set up a very simple test-case so that you can see the small parts of the program work as they are.

The server side code is going to spit out whatever it does, but fortunately you can read the exact results since its output is in the client-side source once it is done executing. Any JavaScript variable that returns a string may be used by any function which requires it, so the fact that getElementById is using a variable to make its call is not significant.

**Sleeping Troll** · 06:18 PM

It works, It works, It works... I would tell you exactly what it was but it is a long painful convoluted story that would teach you nothing... so let's just say it was 2 dogs chasing each others "tales" lol (I am sure you have been there before!).

Thx again and before I go let's deal with that talkupation!

Well I tried however Chris and yourself have been so helpful, I will have to spread it aound someplace else first, thanks again! and again and again...