onchange this.form.submit() not working for web form

Question

been working on this way too long...but can't seem to identify the problem. Already read dozens of articles on stackoverflow and elsewhere.

when I click and change the value, it doesn't auto-submit:

   <form id="orderbyfrm" name="orderbyfrm" action="http://staging.whiterabbitexpress.com/" method="post" class="orderbyfrm">
            <input name="s" value="<?php echo $wre_search_txt?>" type="hidden">
            <label for="orderby" class="sortByLabel">Sort by&nbsp;</label>
            <select class="sortByDropdown" name="orderby" id="orderby" onchange="this.form.submit();">
                <option value="Relevance">Relevance</option>
                <option value="likes" selected="selected">Likes</option>
            <option value="comments" selected="comments">Comments</option>
            </select>
</form>

in Chrome inspector I see an error "Uncaught TypeError: Cannot call method 'submit' of null" onchange

I also tried onchange="javascript:document.orderbyfrm.submit" but that didn't work either.

I also tried onchange="javascript:document.orderbyfrm.submit" but that didn't work either. not sure how to change the scope of 'this'. if this scope is wrong, is any a workaround? — ChatGPT, Sep 05 '12 at 06:47
are you sure you pasted the exactly same form? this form has no issues .. — Mihai Iorga, Sep 05 '12 at 06:48
@Varun Achar, Problem cannot be in _scope of `this`_ because inside event code which defined in attribute `this` always point to element. — Andrew D., Sep 05 '12 at 06:59

Shadow The GPT Wizard · Accepted Answer · 2012-09-05T07:20:27.110

6

Probably you have element or JS object called form or submit somewhere, conflicting with the real form.

Most safe way is using document.getElementById:

<select onchange="SubmitForm('orderbyfrm');">

And the JavaScript:

function SubmitForm(formId) {
    var oForm = document.getElementById(formId);
    if (oForm) {
        oForm.submit(); 
    }
    else {
        alert("DEBUG - could not find element " + formId);
    }
}

Further debugging with good old alert.. instead of the alert("DEBUG ... have this:

var sDebugInfo = "found " + document.forms.length + " forms: \n";
for (var i = 0; i < document.forms.length; i++) {
    var curForm = document.forms[i];
    sDebugInfo += "name: " + curForm.name + ", id: " + curForm.id;
    sDebugInfo += "\n";
}
alert(sDebugInfo);

Depending on what you get, debug should continue.

edited Sep 05 '12 at 07:20

answered Sep 05 '12 at 06:48

Shadow The GPT Wizard

66,030
26
140
208

thanks for the idea. I added an id="orderbyfrm" to the form and added this code, but now get: DEBUG: count not find element orderbyfrm ugg – ChatGPT Sep 05 '12 at 06:53
Something very fishy is going on. When you put `alert(document.forms.length);` what you get? – Shadow The GPT Wizard Sep 05 '12 at 06:58
where shoudl I put that exactly? anywhere? I added it after the form, but it just echo's on my HTML alert(document.forms.length); – ChatGPT Sep 05 '12 at 07:04
Add this to the function, instead the current DEBUG alert. – Shadow The GPT Wizard Sep 05 '12 at 07:05
This page does have other forms, which are necessary. But shouldn't matter right? The javascript is suppose to target only this particular form...if it were actually working. – ChatGPT Sep 05 '12 at 07:15
1

See my edit. Do you see name and id `orderbyfrm` in the list now? – Shadow The GPT Wizard Sep 05 '12 at 07:21
3

For the record, I called my `submit` button `"submit"` and that was the problem. As you suggested, this was preventing the `this.form.submit()` from executing as expected. I renamed the submit button it and the javascript part worked. Leaving this comment since it may be useful to others later on with this same problem. – Jairo Alves May 21 '19 at 13:40

score 0 · Answer 2 · answered Sep 05 '12 at 07:20

0

sorry guys! I found the problem. I had a broken div around this form

<div id="orderby" class="orderby
<form id="xxx" name="xxx" action="#" method="post" class="orderbyfrm">

fixed:

Really appreciate your help everyone!

answered Sep 05 '12 at 07:20

ChatGPT

5,334
12
50
69

onchange this.form.submit() not working for web form

2 Answers2

Linked