How do I persuade this jQuery button click event to submit the correct form [in Safari]?

In the jQuery 'ready' block, I have:

// bind print work order button to form submit
$('#print_work_order_button').click(function(){
    $('#print_work_order_form').submit();
});

... and in the HTML (ignore the variable replacement code... it's working fine):

<form id="print_work_order_form" method="post" action="<TMPL_VAR NAME=SCRIPT_NAME>" target="_blank">
<input type="hidden" name="action" value="printWorkOrder">
<input type="hidden" name="case_id" value="<TMPL_VAR NAME=ID>">
<input type="hidden" name="session_id" value="<TMPL_VAR NAME=SESSION_ID>">
</form>

However, when I click the following button:

<input id="prin开发者_JS百科t_work_order_button" type="button" value="Print Work Order">

... a different form gets submitted. The form that gets submitted is case_form, which is being validated in the jQuery ready block as well:

// validate main form
$('#case_form').validate({
    debug: false,
    rules: {
        phone: {
            phoneUS: true,
            required: true
        }
        [more rules etc...]
    },
    messages: {
        phone: '555-555-5555',
        client_group_id: 'X',
        description: 'X',
        backup_data: 'X',
        first_name: 'X',
        last_name: 'X',
        email: 'X'
    },
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field.'
                : 'You missed ' + errors + ' fields.';
            displayMessage(message);
        } 
    },
    submitHandler: function(form) {
        displayMessage('Saving and syncing with Remedy... we appreciate your patience.', '1');
        form.submit();
    }
});

My only recent change was moving this validate routine into the 'ready' block, so I think that's the problem but I don't know how to fix. I need validate in the 'ready' block in order for that to work... so how do I fix my other, unrelated form submit?

NOTE: oddly, this appears to be a Safari-only bug. I cannot reproduce in any other browser yet.

---

Can you use a submit button instead?

<form id="print_work_order_form" method="post" action="<TMPL_VAR NAME=SCRIPT_NAME>" target="_blank">
<input type="hidden" name="action" value="printWorkOrder">
<input type="hidden" name="case_id" value="<TMPL_VAR NAME=ID>">
<input type="hidden" name="session_id" value="<TMPL_VAR NAME=SESSION_ID>">

<input id="print_work_order_button" type="submit" value="Print Work Order">

</form>

 $('#print_work_order_form').submit();

or

$('#print_work_order_form').validate();

---

It's hard to say without seeing more of your code, but it should work if you change your binding to preventDefault():

// bind print work order button to form submit
$('#print_work_order_button').click(function(e){
    e.preventDefault();
    $('#print_work_order_form').submit();
});

---

If I recall correctly some browsers will treat any of the following HTML input types as "submit" buttons when clicked.

<input type="image" ... />
<input type="submit" ... />

My guess would then be that your <input id="print_work_order_button" type="button" value="Print Work Order"> is actually living inside the form that is being accidentally submitted.

---

If I may make a suggestion it would be to NOT define click handlers for a form's buttons, but rather to override a form's submit handler so that no matter how a form is submitted (e.g., by clicking an image, clicking submit or hitting enter), your code will always get called.