Юй кнопки отправки и отправки действий - PullRequest
Новая
       61

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

1 голос
/ 22 декабря 2009

Я использую 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>

Ответы [ 3 ]

2 голосов
/ 31 декабря 2009

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

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

МЕТОД 1

Обрабатывать событие mousedown вместо события click (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

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

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

YAHOO.util.Event.preventDefault(e);
0 голосов
/ 28 мая 2012

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

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

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

0 голосов
/ 22 декабря 2009

вот простое решение 

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

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

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

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

...