Yui Enviar botões e despachar ação

Question

Estou usando o YUI 2.7.0 e o Struts para o meu projeto e tenho um formulário com dois botões de envio. Um é para salvar e o outro é para excluir. O formulário se submete a uma despacho. Eu adicionei os ouvintes OnClick com sucesso, mas o problema é que o formulário submete antes que os ouvintes sejam executados. Preciso definir o parâmetro de despacho antes do envio do formulário. Como eu faço isso? Abaixo está o que tenho até agora:

<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

O problema é que o código do Yahoo para o widget de botão lida com o evento de clique e, e eles enviam o formulário programaticamente. O manipulador de eventos deles é chamado antes do seu, para que o formulário seja enviado antes mesmo de seu manipulador de eventos ser chamado.

Aqui estão algumas idéias (todas elas funcionam):

MÉTODO 1

Manuseie o evento Mousedown em vez do evento de clique (incêndios em Mousedown antes do clique).

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

Método 2

Use type = link em vez de type = submit (padrão). Eles apenas enviam o formulário se o tipo = submeter (eu não testei isso o suficiente para ver se o formulário ainda é submetido por si mesmo - você pode precisar chamar manualmente o formulário.Submit ())

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

Método 3

Olhando para o código deles, notei que eles criam um campo oculto com o nome do botão que foi clicado para enviar o formulário (apenas esse botão). A tag de entrada precisa ter um atributo de nome e o seu não, para que você precise adicionar um. Em seguida, no servidor, basta verificar o valor do campo oculto (seu atributo de valor).

Independentemente de quais desses métodos você usa, você deve usar isso para impedir que o formulário envie:

YAHOO.util.Event.preventDefault(e); 

Answer 2

Aqui está uma solução fácil

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

Você pode remover a entrada oculta

e sua variável de solicitação de despacho será definida como "salvar usuário" se o primeiro botão for clicado

ou "Excluir usuário" é o 2º é clicado

Answer 3

Esta pergunta tem vários anos, mas ainda tenho um projeto usando o YUI 2.9.0 e eu apenas encontrei o mesmo problema, então compartilharei minha solução, caso alguém se encontre no mesmo congestionamento.

Várias coisas que vale a pena notar sobre essa questão. Primeiro, o problema que Gabriel descreve, onde o botão YUI 2.9.0 Clique em Handler envia o formulário antes que o manipulador de cliques seja chamado não é um problema no IE, pelo menos através do IE9. No Firefox até pelo menos FF12, o problema ocorre. Eu suspeito que também seria um problema no Chrome, Safari e, senão todos os outros navegadores, assim como vejo o que parece ser um caso especial para o IE no manipulador de clique do botão Yui.

Além disso, não gostei de nenhuma das soluções que Gabriel sugeriu. Usando um botão de link invalidou todo o estilo personalizado que eu havia aplicado ao meu botão Enviar, o uso do manipulador de Mousedown perde parte da semântica da interface do usuário de um clique e, por algum motivo Ou, pelo menos, não estava aparecendo nos valores publicados no lado do servidor. No botão Spirit of Gabriel, no entanto, substituí o botão Enviar por um botão de entrada que não enviou por padrão, depois adicionei uma entrada oculta e enviei o formulário:

...

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

...

Finalmente, como Yui está enviando o formulário em clique, mais uma solução deve ser apenas para capturar o evento de envio do formulário e verificar se o destino do evento é o seu botão, faça o que você precisa fazer, depois deixe o envio ou pare, como precisava.