select box won't submit on "onchange"

[rosland]

I have a page where I want to populate a secondary select box based on what you select in the first select box.
Select box1 contains a list of different courses students can take.
When you select a course, select box2 is populated with different start dates for the selected course.

I can't have a pure javascript solution for this, as the dates dynamically change, and are extracted from a database at run-time.

--------

So to my problem.
I've made a dummy page with two select boxes, and a script that queries a dummy table and presents the result as described above.
I have an "onchange" event in the first select box, that submits the form when you select anything (see code below).
This test page works just fine.

I have basically just cut and pasted the code from the dummy page to the real page which contains more elements and styling. (I have changed the form name as described below, so that is not the culprit.)
However, when I transfer the code to the production page, the onchange event stops working, and it refuses to submit the page.
The primary "submit button" at the end of the form works, but the onchange-submit doesn't.

(The recieving/processing page registers all the POST variables into SESSION variables but won't process the page until it recieves the value of the real submit button. As long as that is missing, it just relocates the user to the forms page again, but with the previously posted data intact. Those values are used to repopulate the form.)

Are there any alternative ways to make the page automatically submit when a selection is made in the first select box, or can anyone immediately see why the onchange event fails as it stands now?

 <select onchange="this.document.pamelding.submit()" name="kurs"style="width:250px; font-size: 16px; 
                            background-color:#FFFFCC" >
                              <option value="<?php echo $kurs ?>" <?php if(@$redK) echo $redK; ?>><?php echo $knavn ?></option>
                              <option value="1" style="background-color:#12AE06">Nybegynnerkurs</option>
                              <option value="2" style="background-color:#B8FF29">VK 1</option>
.....and so on.

The "pamelding" in [minicode]this.document.pamelding.submit()[/minicode] is the name of the form.

[bfsog]

This may just be another way to skin a cat, but on a live website I own I have the folllowing code:

<select name="m" id="m" onchange="submitForm(document.forms[0]);">
	<option value="1" >Newest</option>
	<option value="2" >Oldest</option>
	<option value="3" >Random</option>
</select>

And the function submitForm is simple.

submitForm = function(form)
{
	form.submit();
}

The JS function is located in a external js file but I doubt that matters.

You could amend the above, just remember you will need to give the function the right parameter (my example assumes that I want to suubmit the first form on that page).

Edit: If you use Firefox/other-browser-with-a-decent-error-console check theres no errors generated when you invoke the onchange event.

Also, try removing the this. part, just start it from document.

[rosland]

Unfortunately that didn't help.

It's exactly like before.
If I take your supplied code and paste it into the dummy page, the dummy page works fine.
When I do exactly the same with the production page, it stops working.
:-\

[bfsog]

Check that your form tag looks normal (id/name, action, method, enctype).

Also perhaps try and submit the form via other ways, such as add an onclick event to a link which is outside of the form.

Also, you do have a closing </select> tag?

[rosland]

<select name="kurs" id="kurs" style="width:250px; font-size: 16px; background-color:#FFFFCC" 
                            onchange="this.document.pamelding.submit()">
                              <option value="<?php echo $kurs ?>" <?php if(@$redK) echo $redK; ?><?php echo $knavn ?></option>
                              <option value="1" style="background-color:#12AE06">Nybegynnerkurs</option>
                              <option value="2" style="background-color:#B8FF29">VK 1</option>
                              <option value="3" style="background-color:#B8FF29">VK 2</option>
                              <option value="4" style="background-color:#B8FF29">VK 3</option>
                              <option value="5" style="background-color:#B8FF29">VK 4</option>
                              <option value="6" style="background-color:#B8FF29">VK 5</option>
                              <option value="7" style="background-color:#B8FF29">VK 6</option>
                              <option value="8" style="background-color:#B8FF29">Canine Biopati</option>
                              <option value="9" style="background-color:#B8FF29">Termografikurs</option>
                              <option value="10" style="background-color:#B8FF29">Urtekurs</option>
                            </select>

The above is the code cut and pasted.
If I make a dummy form on another page, cut and paste the code above (obviously alter the forms id to match the onchange event), it works flawlessy.

In its original document, which BTW only contains this form, it doesn't.

The original form contains some PHP as well, but that doesn't affect the onchange. At least it doesn't when I add similar code to the dummy form.

[Shadowfiend]

this.document probably won't work, since in some DOM implementations the property on the element that points to its document is something like contentDocument. Instead you can rely on the global [minicode]document[/minicode]. Additionally, accessing a form directly as a property of the document object is a very deprecated way of doing things that probably won't work unless you're in quirks mode.

Instead, for onchange, try this:

onchange="document.getElementById('pamelding').submit()"

And make sure to check that the form has an id of `pamelding', not just a name.

[rosland]

Sorry it took so long to respond to this.

I've tried the getElementById method already (and I do of course have the ID set), but unfortunately it doesn't work either. :-(

[Shadowfiend]

Hm. Any chance we could see the page? If not, try doing it manually in the Firebug console and see if it works. If not, let us know the error it gives.

[Jason]

Fire up the javascript error console and load thepage. I sense that an error is occuring on page load and as a result this isn't working.

[rosland]

Finally figured it out! :rambo:

Running the Firebug console, it returned the following error "submit() is not a function", which initially didn't make any sense.

However, after googling a bit, I discovered the error. The actual submit button of the form itself had both name and id set to "submit". That confused the script.
When I changed the name & id of the submit button itself, everything worked fine.