JQuery form submit not working in drop-down menu in IE7 & IE8

Question

I have a form in a drop-down menu item. The drop-down menu is displayed when hovering over the parent (using the Superfish plugin). I have an a tag that calls a function to submit the form via JQuery. The HTML looks like this:

<form method="post" action="/our-care/" id="frm-oc-dlg">
            <input class="oc-search-txt-field" id="oc-dlg-query-field" name="query" type="text">
            </form>
            <a class="oc-search-btn-info-action" href="#" onclick="ocDlgDoSearch(); return false;">&nbsp;</a>

The JavaScript code to handle the onclick event looks like this:

function ocDlgDoSearch() {
if ($('#oc-dlg-query-field').val() != '') {
    $('#frm-oc-dlg').submit();
}}

This works well in Chrome, Firefix, Safari and IE 9. However, in IE7 and IE8 the form submits but the value of the text field is not sent along (via POST). I'm thinking it has something to do with the fact that the form is in a DOM element that is hidden and shown based on mouseover events of the parent.

Does anyone have any idea why this is happening and perhaps suggestions on how to fix? Thanks!

Answer 1

ocDlgDoSearch() runs the function immediately. And this is not jQuery. Use:

$('#frm-oc-dlg').submit(function onSubmit() {
    yourFunctionCallHere();
});