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

问题

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.

回答1:

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.

回答2:

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!

来源：https://stackoverflow.com/questions/12275810/onchange-this-form-submit-not-working-for-web-form

标签

javascript

submit

form-submit

onchange