Question

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="print_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.

Answer 1

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();