Firefox handles xxx.submit(), Safari doesn't ... what can be done?

Question

I'm trying to make a pull down menu post a form when the user selects (releases the mouse) on one of the options from the menu. This code works fine in FF but Safari, for some reason, doesn't submit the form. I re-wrote the code using jquery to see if jquery's .submit() implementation handled the browser quirks better. Same result, works in FF doesn't work in safari.

The following snippets are from the same page, which has some django template language mixed in.

Here's the vanilla js attempt:

function formSubmit(lang) {
    if (lang != '{{ LANGUAGE_CODE }}') {
        document.getElementById("setlang_form").submit();
    }
}

Here's the jquery attempt:

$(document).ready(function() {
    $('#lang_submit').hide()
    $('#setlang_form option').mouseup(function () { 
        if ($(this).attr('value') != '{{ LANGUAGE_CODE }}') { 
            $('#setlang_form').submit()
        } 
    });
});

and here's the form:

<form id="setlang_form" method="post" action="{% url django.views.i18n.set_language %}">
    <fieldset>
    <select name="language">
    {% for lang in interface_languages %}
        <option value="{{ lang.code }}" onmouseup="formSubmit('{{ lang.name }}')" {% ifequal lang.code LANGUAGE_CODE %}selected="selected"{% endifequal %}>{{ lang.name }}</option>
    {% endfor %}
    </select>
    </fieldset>
</form>

My question is, how can I get this working in Safari?

Answer 1

You should probably use the onchange event of the <select> instead (or as well).

Answer 2

The code would be:

<form id="setlang_form" method="post" action="{% url django.views.i18n.set_language %}">
    <fieldset>
    <select name="language" onchange="formSubmit(this)">
    {% for lang in interface_languages %}
        <option value="{{ lang.code }}" {% ifequal lang.code LANGUAGE_CODE %}selected="selected"{% endifequal %}>{{ lang.name }}</option>
    {% endfor %}
    </select>
    </fieldset>
</form>

To get the value:

function formSubmit(theForm)
{
 .... theForm.options[theForm.selectedIndex].value
}

You can do it with jquery too:

$(document).ready(function() {
    $('#lang_submit').hide()
    $('#setlang_form select').change(function () { 
        ....     $("select option:selected").text() ....  
        } 
    });
});

Look here to know about change event with Jquery: http://docs.jquery.com/Events/change

Answer 3

xxx.submit() has never seemed to work for me either. Simple, but ugly fix is to have the function which does the submit in the HEAD tag of the page as opposed to an external JS file, and, use document.getElementById('whatever_the_id_of_the_form_is).submit as opposed to defining a var then doing var.submit()

Don't ask why. But this is the only way I can get safari to actually submit using the submit() function.