Error referencing a Struts-Form element from a JavaScript function.

Question

As shown below, when referencing the form element named 'custRegion', from the JavaScript function, I get an error msg - document.forms[0].custRegion has no properties.
It appears that this form-element, which also is present in the logic tag is not visible - is it because I'm referencing it incorrectly...
<SCRIPT> function setRegion() { var theRegion= 'Western'
document.forms[0].custRegion.value=theRegion; } </SCRIPT>
<logic:iterate id="customer" name="customerForm" property="customers" >
<html:text name="customer" property="custRegion"/>
<html:select name="customer" property="custState" size="1" onchange="setRegion()">
<html:option value="1"> California </html:option>
<html:option value="2"> Arizona </html:option>
</html:select>
</logic:iterate>

Answer 1

Here's a quick example of what may help you. It simply disables the select box and slides in a new text box. Nevertheless, it shows you that you accessed a struts property by name.
struts code:
<html:select property="customerRegion">
        <html:option value="-1">Unknown</html:option>
        <html:option value="0">Western</html:option>
</html:select>
//quick & dirty textbox for testing.  you'll probably want <html:text ... here instead.
<input type="checkbox"
       onclick="disableSelectAddTxt(document.YOUR_FORM['customerRegion'], this.checked)" />
Check box to replace select pull-down  
      <div id="setTBox"></div>javascript:
function disableSelectAddTxt(selectBoxName, disableIt)
    var setTBoxName = selectBoxName;
    //alert('You passed me ' +setTBoxName+ ' and' +disableIt);
    selectBoxName.disabled = disableIt;
    var setTBox = document.getElementById("setTBox");
    if (disableSelect == true) {
        setTBox.innerHTML = "<input type=\"text\" name="+setTBoxName+ "size=\"10\">";
    if (disableSelect == false) {
        setTBox.innerHTML = "";
  hope this helps.