Yui einreichen Tasten und Versand Aktion

Question

Ich verwende YUI 2.7.0 und Struts für mein Projekt und habe ein Formular mit zwei Tasten vor. Eine davon ist für Save und der andere ist für Löschen. Das Formular sendet an eine Dispatch. Ich habe die Onclick Hörern erfolgreich hinzugefügt wurde, aber das Problem ist, dass das Formular abschickt, bevor die Zuhörer auszuführen. Ich brauche den Versand Parameter vor dem Formular abschickt einzustellen. Wie mache ich das? Im Folgenden finden Sie, was habe ich bisher:

<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

Das Problem ist, Code Yahoo für das Button-Widget das Click-Ereignis behandelt, und darin, sie programmatisch das Formular abzuschicken. Ihre Event-Handler wird vor Ihnen aufgerufen, so dass die Form vor Ihrem Event-Handler übermittelt wird auch aufgerufen wird.

Hier sind einige Ideen (sie alle arbeiten):

METHODE 1

Gehen Sie mit dem Mousedown-Ereignis statt des Click-Ereignis (mousedown- ausgelöst wird, bevor Klick).

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

METHODE 2

Verwenden Sie type = verknüpfen statt type = einreichen (Standard). Sie tragen vor, nur die Form, wenn der Typ = einreichen (ich habe das nicht genug getestet, um zu sehen, ob die Form noch vorträgt selbst - Sie können manuell aufrufen form.submit ())

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

METHODE 3

an ihrem Code Sehen, bemerkte ich, dass sie ein verstecktes Feld mit dem Namen der Schaltfläche erstellen, die geklickt wurde, das Formular abzuschicken (NUR diese Taste). Die Input-Tag hat einen Namen Attribut haben, und Ihnen nicht der Fall, so würden Sie einen hinzufügen. Dann auf dem Server, die Sie gerade prüfen, die versteckten Feldwertes (Ihr Wert-Attribut).

Egal welche dieser Methoden, die Sie verwenden, sollten Sie diese werden mit dem Formular stoppen von der Abgabe:

YAHOO.util.Event.preventDefault(e); 

Answer 2

Hier ist eine einfache Lösung

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

können Sie den versteckten Eingang

entfernen

und Ihre Erledigungsanforderung Variable wird auf „Save User“ eingestellt werden, wenn die erste Schaltfläche klickt

oder "Delete User" ist der zweite geklickt

Answer 3

Diese Frage ist schon einige Jahre alt, aber ich habe noch ein Projekt mit YUI 2.9.0 und ich lief nur in das gleiche Problem, so dass ich meine Lösung selbst für den Fall, jemand anderes findet teilen werde in der gleichen Marmelade.

Mehr Dinge im Wert von über diese Frage unter Hinweis darauf. Zunächst wird das Problem Gabriel beschreibt, wo der YUI 2.9.0 Button-Click-Handler sendet das Formular vor Ihren Click-Handler aufgerufen wird, ist kein Problem, auf IE, zumindest durch IE9. Auf FireFox durch mindestens FF12 tritt das Problem auf. Ich vermute, es wäre auch ein Problem in Chrome, Safari, und die meisten, wenn nicht alle anderen Browser als auch ich sehe, was ein spezieller Fall für IE in der YUI-Knopf Click-Handler zu sein scheint.

Auch ich habe nicht wie eine der Lösungen Gabriel vorgeschlagen. eine Link-Taste für ungültig erklärte all die individuellen Styling ich meinen Submit-Button beworben hatte, mit dem mousedown- Handler einige der Benutzeroberfläche Semantik eines Klicks, und aus irgendeinem Grunde YUI Knopf gab die Absenden-Button verlor ich den Überblick über den ursprünglichen Namen verliert oder zumindest, wurde es zeigt nicht in dem entsandte Wert auf der Serverseite auf. Im Geist der Link-Taste Gabriel aber ich ersetzt die Taste mit einem Eingang Absenden-Button, die standardmäßig nicht vorlegen, dann hinzugefügt, um einen versteckten Eingang und die Form selbst vorgelegt:

...

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

...

Schließlich, da YUI das Formular auf Klick einreicht, noch sollte eine andere Lösung sein nur die Form der einreichen Ereignis und die Prüfung zu fangen, wenn das Ereignisziel Ihre Taste ist, tun, was Sie tun müssen, dann lassen Sie das Absenden gehen oder Anschlag es, je nach Bedarf.