dojo and javascript DOM issue

I am trying to change the values of some form fields(widgets), using javascript, and I seems as if the javascript form object cannot find the controls. Has anyone else ran into this problem and if so what was your fix. I am using the document.getElementById.

My crystal ball is on the fritz. Perhaps you could supply some details?

P.S. Be sure you are using the id of the element, not the name.

Now when I switched the select widget to a standard html control it works.

here is the jsp page:

<html>
<head>
<title>Dojo: Hello World!</title>


<script type="text/javascript" src="js/kstools.js"></script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.event.*");

// Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.*");

// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");

function helloPressed()
{
// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
// (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
dojo.io.bind({
url: 'HelloWorldResponseGET.jsp',
handler: helloCallback,
formNode: dojo.byId('myForm'),
mimetype: 'text/xml'
});
}

function init()
{
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed')
}

dojo.addOnLoad(init);

function helloCallback(type, data, evt)
{
if (type == 'error')
{
alert('Error when retrieving data from the server!');
}
else
{
populateForm(data, document.getElementById('myForm'));
}

}

</script>
</head>

<body>
<button dojoType="Button" widgetId="helloButton" toggle="explode" toggleDuration="250">Hello World!</button>
<br>
<form id="myForm" method="POST">
Please enter your name: <input type="text" name="name" id="testtext">
<br>
<br>
<select class="dojo-ComboBox" style="width: 50px;" name="testcombo" id="testcombo">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
<option value="thud">thud</option>
</select>
</form>
<br>
<br>
your response is <span id="textdata"></span>
</body>
</html>

here is the js code:

function populateForm(data, frmObj)
{
var text = '';
var name = '';
var theForm = frmObj;

clearFields(theForm);

for (var i = 0;;i++)
{
if (data.getElementsByTagName('name')[i] == null && data.getElementsByTagName('text')[i] == null)
{
break;
}

name = data.getElementsByTagName('name')[i].childNodes[0].nodeValue;
text = data.getElementsByTagName('text')[i].childNodes[0].nodeValue;

------> THIS IS WHERE THE DOM CAN NOT FIND THE WIDGET <--------
if (document.getElementById(name) != null && document.getElementById(name) != 'undefined')
{
populateByType(document.getElementById(name), text);
}
}
}

Well for one thing your button is outside the form tags, not sure if that makes a big deal.

When you debug is name actually giving yout the value you expect.

If you use the Firebug extension for Firefox, it will help you debug errors.

getFirebug.com

Eric