кнопки отправки yui и действие отправки

Question

Я использую YUI 2.7.0 и Struts для своего проекта, и у меня есть форма с двумя кнопками отправки.Один предназначен для сохранения, а другой - для удаления.Форма отправляется в 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 для виджета «Кнопка» обрабатывает событие щелчка, и в нем они программно отправляют форму.Их обработчик событий вызывается раньше вашего, поэтому форма отправляется еще до того, как будет вызван ваш обработчик событий.

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

МЕТОД 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

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

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

МЕТОД 3

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

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

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>

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

и вашей переменной запроса отправки будет присвоено значение "Сохранить пользователя", если будет нажата первая кнопка

или "Удалить пользователя" - это 2-й щелчок

Answer 3

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

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

Кроме того, мне не понравилось ни одно из решений, предложенных Габриэлем.Использование кнопки ссылки сделало недействительными все пользовательские стили, которые я применил к моей кнопке отправки, использование обработчика mousedown теряет часть семантики пользовательского интерфейса щелчка, и по какой-то причине кнопка YUI теряла исходное имя, которое я дал кнопке отправки. или, по крайней мере, оно не отображалось в значениях 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 отправляет форму при нажатии, еще одно решение должно заключаться в том, чтобы просто перехватить событие отправки формы и проверить, является ли целью события ваша кнопка, сделать то, что вам нужно, затем отпустить отправку или остановить ее, как нужный.