ajax "<SELECT>" and validation

[iclimb513]

Recently learning ajax and using it to populate a select box in a form.

The guts of the ajax function:

result = http_request.responseText;
document.getElementById("myspan").innerHTML = result;

That populates this form:

<form name = "form1" blah blah>
<div id="myspan"></div>
(other stuff)
</form>

So where

<div id="myspan"></div> is when ajax runs populates with

<SELECT NAME = "ShippingMethod">
<option value="" SELECTED>Please select</option>
(more options)
</SELECT>

This works fine.

However there is a pre-existing form validation script which has this:

if (theForm.ShippingMethod.value == "")
{
alert("Please Select a shipping method.");
theForm.ShippingMethod.focus();
return (false);
}

This still works in IE, but in Mozilla it fails and gives an error:

Error: theForm.ShippingMethod has no properties

Can anyone give me a solution? Thanks.

[iclimb513]

Actually I guess I have bigger problems.

Loading this into my form:

<SELECT NAME = "ShippingMethod">
<option value="" SELECTED>Please select</option>
(more options)
</SELECT>

by use of

result = http_request.responseText;
document.getElementById("myspan").innerHTML = result;

Fails to send the ShippingMethod selection when the form is posted in Mozilla, though it works in IE.

I guess I need to different strategy such has having

<SELECT NAME = "ShippingMethod"></SELECT>

In the form and using ajax / javascript to populate just the options.

Anyone have a good tutorial?