Как мне убедить это событие нажатия кнопки jQuery отправить правильную форму [в Safari]?

Question

В блоке jQuery 'ready' у меня есть:

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

... и в HTML (игнорируйте код замены переменной ... он работает нормально):

<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>

Однако, когда я нажимаю следующую кнопку:

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

... отправляется другая форма.Отправляемая форма - case_form, которая также проверяется в блоке готовности jQuery:

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

Мое единственное недавнее изменение - перемещение этой процедуры проверки в блок 'ready', поэтому я думаю, что этопроблема, но я не знаю, как исправить.Мне нужно проверить в блоке «ready», чтобы это работало ... так как мне исправить мою другую, не связанную форму отправки?

ПРИМЕЧАНИЕ: как ни странно, это похоже на ошибку только в Safari.Я не могу воспроизвести в любом другом браузере.

Answer 1

Можете ли вы вместо этого использовать кнопку отправки?

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

или

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

Answer 2

Трудно сказать, не видя больше вашего кода, но оно должно работать, если вы измените привязку на preventDefault():

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

Answer 3

Если я правильно помню, некоторые браузеры будут обрабатывать любой из следующих типов ввода HTML как кнопки «отправки» при нажатии.

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

Тогда я думаю, что ваш <input id="print_work_order_button" type="button" value="Print Work Order"> фактически живет внутрислучайно отправляемая форма.

---

Если я могу сделать предложение, это будет НЕ определять обработчики click для кнопок формы, а переопределять обработчик submit формы, чтобынезависимо от того, как отправляется форма (например, нажав на изображение, нажав на кнопку отправить или нажав клавишу ввода), ваш код всегда будет вызываться.