yui submit button and dispatch action

Question

Я использую YUI 2.7.0 и Struts для своего проекта и имею форму с двумя кнопками отправки. Один для Save, а другой для Delete. Форма отправляется в DispatchAction. Я добавил слушателей onclick успешно, но проблема заключается в том, что форма отправляется перед выполнением прослушивателей. Мне нужно установить параметр отправки до отправки формы. Как мне это сделать? Ниже то, что я до сих пор:

<form name="adminUserForm" method="post" action="manage_user.do"> 
    <input type="hidden" id="dispatch" name="dispatch" value="unspecified"/> 
    <!-- other form fields here --> 
    <input type="submit" value="Save User" id="saveUser"> 
    <input type="submit" value="Delete User" id="deleteUser"> 
</form> 
<script type="text/javascript"> 
    function confirmDelete(msg) 
    { 
    if (confirm(msg)) 
    { 
     return setDispatchMethod("delete"); 
    } 
    else 
     return false; 
    } 
    function setDispatchMethod(methodName) 
    { 
    dispatchField = document.getElementById("dispatch"); 
    dispatchField.value = methodName 
    return true; 
    } 
    var onClickSaveUser = function (e) 
    { 
    return setDispatchMethod('save'); 
    }; 
    var onClickDeleteUser = function (e) 
    { 
    return confirmDelete('Are you sure you want to delete the user?'); 
    }; 
    new YAHOO.widget.Button("deleteUser", {onclick: {fn: onClickDeleteUser }}); 
    new YAHOO.widget.Button("saveUser",  {onclick: {fn: onClickSaveUser }}); 
</script> 

Answer 1

Проблема заключается в том, что код Yahoo для виджета Button обрабатывает событие click, и в нем они программно представляют форму. Их обработчик событий вызывается перед вашим, поэтому форма отправляется до того, как ваш обработчик событий даже вызван.

Вот некоторые идеи (все они работают):

МЕТОД 1

Ручка на MouseDown событие вместо события мыши (MouseDown пожаров до щелчка).

var deleteUserButton = new YAHOO.widget.Button("deleteUser"); 
deleteUserButton.on("mousedown", onClickDeleteUser); 

var deleteUserButton = new YAHOO.widget.Button("saveUser"); 
deleteUserButton.on("mousedown", onClickSaveUser); 

//Using this, you can easily stop the form from submitting 
//by using YAHOO's event utility (by adding this code, you 
//will prevent the click event from firing as well). 

YAHOO.util.Event.preventDefault(e); 

МЕТОД 2

Используйте тип = ссылка вместо типа = отправить (по умолчанию). Они только отправить форму, если тип = представить (я не проверял этого достаточно, чтобы увидеть, если форма по-прежнему представляет сам по себе - вы, возможно, придется вручную вызвать form.submit())

new YAHOO.widget.Button("deleteUser", { type: 'link', onclick: { fn: onClickDeleteUser} }); 
new YAHOO.widget.Button("saveUser", { type: 'link', onclick: { fn: onClickSaveUser} }); 

МЕТОД 3

Посмотрев на свой код, я заметил, что они создают скрытое поле с именем кнопки, на которую была нажата кнопка, чтобы отправить форму (ТОЛЬКО эта кнопка). Тег ввода должен иметь атрибут имени, а ваш - нет, поэтому вам нужно добавить его. Затем на сервере вы просто проверяете значение этого скрытого поля (ваш атрибут value).

Независимо от того, какой из этих методов, которые вы используете, вы должны использовать это, чтобы остановить форму от представления:

YAHOO.util.Event.preventDefault(e); 

Answer 2

здесь простое решение

<form> 
    <input type="submit" name='dispatch' value="Save User" id="saveUser"> 
    <input type="submit" name='dispatch' value="Delete User" id="deleteUser"> 
</form> 

вы можете удалить скрытый ввод

и переменную запроса доставки будет установлен в положение «Сохранить пользователя» если первая кнопка нажата

или «Удалить пользователя» является второй щелкают

Answer 3

Этот вопрос несколько лет, но я до сих пор есть проект, используя YUI 2.9.0 и я просто столкнулся с той же проблемой, поэтому я поделюсь своим решением, если кто-то другой окажется в том же самом джем.

Несколько вещей стоит отметить по этому вопросу. Во-первых, проблема Габриэля описывает, где обработчик щелчка YUI 2.9.0 Button передает форму до того, как ваш обработчик клика вызывается, не является проблемой для IE, по крайней мере, через IE9. В FireFox по крайней мере FF12 возникает проблема. Я подозреваю, что это также будет проблемой в Chrome, Safari и большинстве, если не во всех других браузерах, а также я вижу то, что кажется особым случаем для IE в обработчике щелчка кнопки YUI.

Кроме того, мне не понравилось ни одно из решений, предложенных Габриэлем. Использование кнопки ссылки аннулировало все пользовательские стили, которые я применил к моей кнопке отправки, используя обработчик mousedown, теряет часть семантики пользовательского интерфейса щелчка, и по какой-то причине YUI Button теряла следы исходного имени, которое я дал кнопке отправки или, по крайней мере, он не отображался в значениях POSTED на стороне сервера. В духе кнопки ссылки Гавриила, однако, я заменил кнопку отправки с кнопкой ввода, который не подают по умолчанию, а затем добавил скрытый вход и представил форму себя:

... 

<form id='form'> 
    <input type="button" value="&gt;" id="start_survey"> 

... 

function start_survey (p_oEvent, p_aArgs) { 
    var input = document.createElement ('input'); 
    input.type = 'hidden'; 
    input.name = this.get ('name'); 
    input.value = '&gt;' 

    var form = YAHOO.Dom.get ('form'); 
    form.appendChild (input); 
    form.submit(); 
} 

new YAHOO.widget.Button ("start_survey", {onclick: {fn: start_survey}}); 

... 

Наконец, поскольку YUI является представлением форму на клике, еще одно решение должно состоять только в том, чтобы поймать событие отправки формы и проверить, является ли цель события вашей кнопкой, сделайте то, что вам нужно сделать, а затем отправьте отправку или остановите ее по мере необходимости.