"object doesn't support this property or method" error

[SmittyBroham]

Hello,

I have a function that loops through 2 select lists and records the
values of any hi-lighted options a user would have selected. It then
sets 2 corresponding "hidden" form elements to the values and submits
the form data to the server.

I was error free until I added the following line:

document.myform .submit();

This produces the "object doesn't support this property or method"
error. The troubleshooting steps I have taken are:

1) Confirmed the existance of <form> and </form> tags.
2) Confirmed there is no typo in the form name.
3) Tried changing the form name from "bhd2pib_fo rm" to just "myform".
4) Commented out the suspected offending line of code and I am again
error free, uncomment it, the error comes back.
5) Added a normal "submit" button to test the action and post
attributes of the <form> tag and that works fine.

I am having a hard time believing a simple method call such as
document.myform .submit(); is so difficult to figure out! Please, any
help would be greatly appreciated. The function is pasted below in
it's entirety:

<script type="text/javascript">
function setValues()
{
var bhd_list = document.myform .bhd_headings;
var pib_list = document.myform .pib_headings;

var bhd_values = ''; // String of selected base_heading ids to
map
var pib_value;

for ( i=1; i<bhd_list.opti ons.length; i++ ) {
if ( bhd_list.option s[i].selected ) {
if ( !bhd_values ) {
bhd_values = bhd_values +
bhd_list.option s[i].value;
}
else {
bhd_values = bhd_values + ':' +
bhd_list.option s[i].value;
}
}
}

for ( j=1; j<pib_list.opti ons.length; j++ ) {
if ( pib_list.option s[j].selected ) {
pib_value = pib_list.option s[j].value;
break;
}
}

if ( !bhd_values ) {
alert( "You have to select at least 1 base heading to
map or else this page doesn't make a lot of sense to have." );
}

if ( !pib_value ) {
alert( "You have to select a PIB heading to map to" );
}

// Set values of hidden fields
document.myform .bhd_values.val ue = bhd_values;
document.myform .pib_value.valu e = pib_value;

document.myform .submit(); //this line causes the error
}
</script>

[RobG]

SmittyBroham wrote:

Hello,

I have a function that loops through 2 select lists and records the
values of any hi-lighted options a user would have selected. It then
sets 2 corresponding "hidden" form elements to the values and submits
the form data to the server.

I was error free until I added the following line:

document.myform .submit();
I would add your function to the form "onsubmit" event and return
false if your validation fails. Then your submit stays as a
plain submit button.

[...] var bhd_list = document.myform .bhd_headings;
var pib_list = document.myform .pib_headings;
If you pass a reference to the table from the event, you don't
need all those document.myform calls:

<form ... onsubmit="retur n setValues(this) ;" ... >
for ( i=1; i<bhd_list.opti ons.length; i++ ) {
This can be optimised a little as:

var len=bhd_list.op tions.length;
for (var i=0; i<len; i++) {

Use var to keep i local. Getting the length property once is
more efficient and will make a small difference if you have many
options.
if ( bhd_list.option s[i].selected ) {
if ( !bhd_values ) {
bhd_values = bhd_values +
bhd_list.option s[i].value;
}
else {
bhd_values = bhd_values + ':' +
bhd_list.option s[i].value;
This too can be a little more concise:

for ( i=1; i<bhd_list.opti ons.length; i++ ) {
if ( bhd_list.option s[i].selected ) {
if ( !bhd_values == '') bhd_values += ':';
bhd_values += bhd_list.option s[i].value;
}
}

[...] if ( !bhd_values ) {
alert( "You have to select at least 1 base heading to
map or else this page doesn't make a lot of sense to have." );
}
return false here to cancel the submit:

map or else this page doesn't make a lot of sense to have." );
return false
}
if ( !pib_value ) {
alert( "You have to select a PIB heading to map to" );
}
And do the same here

// Set values of hidden fields
document.myform .bhd_values.val ue = bhd_values;
document.myform .pib_value.valu e = pib_value;
Use "theForm" reference here to get rid of document...

theForm.bhd_val ues.value = bhd_values;
theForm.pib_val ue.value = pib_value;

document.myform .submit(); //this line causes the error

This line is no longer needed. The trivial line to add is:

return true;

But that should not be required (but test in lots of browsers
first).

The full script is below, tested in IE and Firefox.

<script type="text/javascript">
function setValues(theFo rm) {
var bhd_list = theForm.bhd_hea dings,
pib_list = theForm.pib_hea dings,
bhd_values = '',
pib_value = '';

var len = bhd_list.option s.length;
for (var i=1; i<len; i++ ) {
if ( bhd_list.option s[i].selected ) {
if ( !bhd_values == '') bhd_values += ':';
bhd_values += bhd_list.option s[i].value;
}
}

var len = pib_list.option s.length
for (var j=1; j<len; j++ ) {
if ( pib_list.option s[j].selected ) {
pib_value = pib_list.option s[j].value;
break;
}
}

if ( bhd_values == '' ) {
alert("You have to select at least 1 base"
+ " heading to map or else this page"
+ " doesn't make a lot of sense to have.");
return false;
}

if ( pib_value == '' ) {
alert("You have to select a PIB heading"
+ " to map to");
return false;
}

// Set values of hidden fields
theForm.bhd_val ues.value = bhd_values;
theForm.pib_val ue.value = pib_value;
}
</script>

--
Rob

[SmittyBroham]

Hi Rob,

Using the form's onSubmit action did indeed work. Thanks for your
detailed response!

-Mark