input type="submit" anhand des Namens identifizieren

[ChrisPHL]

Moin Leute,
vermutlich, weil ich selbst nicht die größte Javascriptleuchte bin, konnte ich IMHO keine hilfreiche INformation zu diesem Problem hier finden:

Ich habe eine Seite mit folgenden Inhalten: (Fonera- Webinterfaceseite)

  
<form method="post" action="/cgi-bin/webif/autoupdate.sh" enctype="multipart/form-data" onSubmit="return formsubmit();">  
[...]  
<script type="text/javascript">  
<!--  
function formsubmit() {  
 alert ("Jetzt kommt die Abfrage!");  
 if (isset($_POST['update'])) {  
// if ( $submit=="update" ) {  
  antwort=confirm("  [...] mit \"OK\" starten oder mit \"Abbrechen\" abbrechen.")  
  if (antwort) { return true;}  
  else { return false;}  
 }  
}  
//-->  
</script>  
[...]  
<input type="submit" name="submit" value="Submit" class="plain_button_orange" />  
<input type="submit" name="update" value="Update now!" class="plain_button_orange" />  
</form>  

Ich habe dem FORM-Tag erfolgreich eine onSubmit- Funktion "mitgegeben", die Funktion wird aufgerufen. Wie zu erkennen handelt es sich bei der Funktion "formsubmit()" nur um eine Sicherheitsabfrage. Diese soll aber nur dann erscheinen, wenn der "Update-Button" gedrückt worden ist. Im Moment wird wird aber ga rnicht abgefragt, beide if- Abfragen schlagen fehl. Nehme ich sie völlig ´raus, erscheint beim Klick erst noch die Sicherheitsabfrage und es wird je nach Wahl des Users übertragen oder nicht.

Wie kann ich erfolgreich abfragen, welcher Button vom User gedrückt worden ist?
Ich habe schon einiges zu den modernen Buttons (<input type="button" ) gelesen aber das scheint mir in dem Kontext nicht bzw nur mit sehr großem Aufwand umsetzbar zu sein. Eine Umstellung auf diese Button möchte ich also möglichst umgehen.

Danke schon mal für eure Hilfe!

Gruß
Christian

[Antipitch]

Hi Christian,
das kann so nicht funktionieren:

1. Das JS gehört zumindest in den Kopf der Seite, idealiter in eine eigene .js Datei

2. »»  if (isset($_POST['update'])) {
Das ist PHP Code und hat in einer JS Funktion nichts zu suchen (es sei denn innerhalb von <?php ?>, aber auch das nur, wenn an der Stelle serverseitig Daten ausgegeben oder verarbeitet werden sollen (hier nicht der Fall)

3. Mehrere submits nix gut. Deine Funktion wird bei Click auf beide ausgeführt. Dein Formular wird bei Click auf den normalen submit aber niemals abgeschickt (wenn  das Script funktionieren würde, wegen return false)

Lösung: Nimm anstatt des zweiten submits einen <button></button>, kannst du ja genauso aussehen lassen wie den anderen submit. Darauf legst du einen onclick event, der deine Funktion aufruft. Da findet dann nur dein confirm statt und bei Bestätigung wird das Formular abgesendet. Bei Benutzung des submits wird es halt ganz normal (ohne confirm) gesendet.

Gruß
Antipitch

[Sven Rautenberg]

Moin!

das kann so nicht funktionieren:

1. Das JS gehört zumindest in den Kopf der Seite, idealiter in eine eigene .js Datei

Nein, Javascript ist überall in der Seite erlaubt - entscheidend ist nur, dass zum Zeitpunkt der Codeausführung die beabsichtigten Seitenelemente schon existieren (also z.B. nicht erst später im Quelltext stehen und so beim Seitenladen noch nicht verfügbar wären).

In der dargestellten Situation ist alles geladen und wartet auf Benutzerinteraktion - da ist die Position des Javascripts absolut irrelevant.

2. »»  if (isset($_POST['update'])) {
   Das ist PHP Code und hat in einer JS Funktion nichts zu suchen (es sei denn innerhalb von <?php ?>, aber auch das nur, wenn an der Stelle serverseitig Daten ausgegeben oder verarbeitet werden sollen (hier nicht der Fall)

Das ist offenbar der zentrale Denkfehler von Chris.

3. Mehrere submits nix gut. Deine Funktion wird bei Click auf beide ausgeführt. Dein Formular wird bei Click auf den normalen submit aber niemals abgeschickt (wenn  das Script funktionieren würde, wegen return false)

Jedes Formular darf so viele Submit-Buttons haben, wie in den Browser passen. Das ist nicht das Problem. Entscheidend ist, dass man berücksichtigt, dass nur der geklickte Button ans name=value-Paar mit den Formulardaten mitgeschickt wird.

Auf Javascript-Seite hingegen gibts noch keine Formulardaten. Wenn man da den "richtigen" Button isolieren will, empfiehlt sich, das mit onclick direkt im Button zu tun - eventuell angereichert mit einer weiteren Verarbeitung im onsubmit. In diesem Fall aber würde es vollkommen ausreichen, das Click-Event des einen Buttons durch "return false" abzubrechen, um den Submit-Vorgang zu unterbrechen.

Lösung: Nimm anstatt des zweiten submits einen <button></button>, kannst du ja genauso aussehen lassen wie den anderen submit.

Diese Idee ändert nichts am javascriptseitigen Verhalten der Schaltflächen - aber (und das ist gravierend) es werden die Unzulänglichkeiten des IE mit diesem Formularelement eingebaut. Der IE sendet das Falsche in den Formulardaten, er baut ALLE Buttons in die Daten ein, nicht nur den geklickten, er sendet den HTML-Inhalt innerhalb von <button>, nicht den definierten value, etc... Deshalb ist von <button> zum jetzigen Stand der Technik nur abzuraten.

Darauf legst du einen onclick event, der deine Funktion aufruft. Da findet dann nur dein confirm statt und bei Bestätigung wird das Formular abgesendet. Bei Benutzung des submits wird es halt ganz normal (ohne confirm) gesendet.

Das geht auch ohne <button>...

- Sven Rautenberg

[Antipitch]

Moin Sven,

1. Das JS gehört zumindest in den Kopf der Seite, idealiter in eine eigene .js Datei

Nein, Javascript ist überall in der Seite erlaubt - entscheidend ist nur, dass zum Zeitpunkt der Codeausführung die beabsichtigten Seitenelemente schon existieren (also z.B. nicht erst später im Quelltext stehen und so beim Seitenladen noch nicht verfügbar wären).
In der dargestellten Situation ist alles geladen und wartet auf Benutzerinteraktion - da ist die Position des Javascripts absolut irrelevant.

von nicht erlaubt habe ich auch nichts gesagt. Und auch nicht, dass deswegen das Script nicht funktioniert. Meiner Meinung nach bieten ausgelagerte Script aber den klaren Vorteil schnellerer, kontollierterer updates. Außerdem befinden wir uns doch im Zeitalter der Trennung von Inhalten einerseits sowie Formatierungen und Funktionalitäten andererseits. Damit stehe ich auch nicht alleine da (var ich += Peter-Paul Koch)

2. »»  if (isset($_POST['update'])) {
   Das ist PHP Code und hat in einer JS Funktion nichts zu suchen (es sei denn innerhalb von <?php ?>, aber auch das nur, wenn an der Stelle serverseitig Daten ausgegeben oder verarbeitet werden sollen (hier nicht der Fall)

Das ist offenbar der zentrale Denkfehler von Chris.

Völlige Zustimmung. Wäre ihm vielleicht nicht passiert, hätte er eine .js Datei vor sich gehabt. Vieleicht aber doch ;-)

3. Mehrere submits nix gut. Deine Funktion wird bei Click auf beide ausgeführt. Dein Formular wird bei Click auf den normalen submit aber niemals abgeschickt (wenn  das Script funktionieren würde, wegen return false)

Jedes Formular darf so viele Submit-Buttons haben, wie in den Browser passen. Das ist nicht das Problem. Entscheidend ist, dass man berücksichtigt, dass nur der geklickte Button ans name=value-Paar mit den Formulardaten mitgeschickt wird.

Enter Taste? Name/ value Paare? Siehe unten...

Auf Javascript-Seite hingegen gibts noch keine Formulardaten. Wenn man da den "richtigen" Button isolieren will, empfiehlt sich, das mit onclick direkt im Button zu tun - eventuell angereichert mit einer weiteren Verarbeitung im onsubmit. In diesem Fall aber würde es vollkommen ausreichen, das Click-Event des einen Buttons durch "return false" abzubrechen, um den Submit-Vorgang zu unterbrechen.

Genau das hab ich ihm doch vorgeschlagen(?). return false reicht aber wohl nicht, wenn der eine button ganz normal absenden soll und der andere mit dem confirm Zwischenschritt (so hab ich ihn verstanden)?

Lösung: Nimm anstatt des zweiten submits einen <button></button>, kannst du ja genauso aussehen lassen wie den anderen submit.

Diese Idee ändert nichts am javascriptseitigen Verhalten der Schaltflächen - aber (und das ist gravierend) es werden die Unzulänglichkeiten des IE mit diesem Formularelement eingebaut. Der IE sendet das Falsche in den Formulardaten, er baut ALLE Buttons in die Daten ein, nicht nur den geklickten, er sendet den HTML-Inhalt innerhalb von <button>, nicht den definierten value, etc... Deshalb ist von <button> zum jetzigen Stand der Technik nur abzuraten.

Mit den Unzulänglichkeiten hast du natürlich Recht, aber wenn der zweite button lediglich das confirm aufrufen soll und serverseitig keine name/value Paare für submit unterschieden bzw. verarbeitet werden (konnte ich in der Frage nicht erkennen), ist es doch irrelevant, was übergeben wird. Und Thema mehrere submits/ Enter Taste: Hab's jetzt nicht nochmal nachgelesen: Übergeben IEs bei mehreren submits nicht gar kein name/value Paar und der FF nimmt immer den ersten submit, den er findet? Kann ich -auch falls doch eine serverseitige Verarbeitung stattfinden soll- jetzt keinen riesigen Vorteil entdecken.

Das geht auch ohne <button>...

Stimmt :)

Gruß
Antipitch

[Sven Rautenberg]

Moin!

von nicht erlaubt habe ich auch nichts gesagt.

Du hast suggeriert, die Platzierung des Javascripts würde zur Problemlösung beitragen. Tut es nicht.

Wenn du Schönheitsanmerkungen machen willst, dann kennzeichne sie doch am besten entsprechend.

Genau das hab ich ihm doch vorgeschlagen(?). return false reicht aber wohl nicht, wenn der eine button ganz normal absenden soll und der andere mit dem confirm Zwischenschritt (so hab ich ihn verstanden)?

Wenn du aus dem Konstrukt des JS/PHP-Gemisches mit Phantasie die Absicht ermittelst, dann soll onsubmit, aber nur bei dem einen Button, eine Sicherheitsabfrage kommen und ggf. den Submit-Vorgang verhindern.

Mit den Unzulänglichkeiten hast du natürlich Recht, aber wenn der zweite button lediglich das confirm aufrufen soll und serverseitig keine name/value Paare für submit unterschieden bzw. verarbeitet werden (konnte ich in der Frage nicht erkennen), ist es doch irrelevant, was übergeben wird.

Nein, serverseitig soll höchstwahrscheinlich unterschieden werden, welcher der zwei unterschiedlich beschrifteten Buttons geklickt wurde, um dadurch unterschiedliche Aktionen durchzuführen.

Und das scheitert im IE mit <button>.

Und Thema mehrere submits/ Enter Taste: Hab's jetzt nicht nochmal nachgelesen: Übergeben IEs bei mehreren submits nicht gar kein name/value Paar und der FF nimmt immer den ersten submit, den er findet? Kann ich -auch falls doch eine serverseitige Verarbeitung stattfinden soll- jetzt keinen riesigen Vorteil entdecken.

Wenn kein Submit-Button aktiviert wurde, ist nach den offiziellen Regeln keiner "erfolgreich" gewesen. Aber nur erfolgreiche Formularelemente werden gesendet.

Allerdings haben Submit-Buttons eventuell den Fokus, und die Return-Taste aktiviert dann den Button. Dann muß er natürlich gesendet werden.

- Sven Rautenberg

[ChrisPHL]

[...] dann soll onsubmit, aber nur bei dem einen Button, eine Sicherheitsabfrage kommen und ggf. den Submit-Vorgang verhindern.

Ja ja ja! Genau so soll es sein, deshalb meine Anfrage, wie man das unterscheiden kann.
Serverseitig (also auf dem Router "LaFonera") wird das in einem Shellscript auch hervorragend gemacht. Aber aus dem Script heraus kann ich keine Interaktion mit dem User veranlassen, deshalb habe ich mir an der Stelle ein wenig JS-Code vorgestellt.
Habt ihr da an Hand meines Code- Beispiels im ersten Post einen konkreten Vorschlag? Ich währe wirklich sehr dankbar.

Gruß
Christian

[Sven Rautenberg]

Moin!

Habt ihr da an Hand meines Code- Beispiels im ersten Post einen konkreten Vorschlag? Ich währe wirklich sehr dankbar.

Haben wir doch schon gegeben. onclick.

- Sven Rautenberg

[ChrisPHL]

Haben wir doch schon gegeben. onclick.

Klick! Manchmal sieht ma nden Wald vor lauter Bäumen nicht... Ich habe nun dem zweiten Button ein "onclick" eingefügt, was eine Variable setzt und genau diese Variable wird in "formsubmit()" abgefragt. Wie einfach...

  
<form method="post" action="/cgi-bin/webif/autoupdate.sh" enctype="multipart/form-data" onSubmit="return formsubmit();">  
[...]  
<script type="text/javascript">  
<!--  
submit = "null";  
function setvar() {  
 submit="update";  
}  
function formsubmit() {  
 if ( submit == "update" ) {  
  antwort=confirm("  [...] Update mit \"OK\" starten oder mit \"Abbrechen\" abbrechen.")  
  if (antwort) { return true;}  
  else { return false;}  
 }  
}  
//-->  
</script>  
[...]  
<input type="submit" name="submit" value="Submit" class="plain_button_orange" />  
<input type="submit" name="update" value="Update now!" class="plain_button_orange" onclick="setvar();"/>  
</form>  

Habt nochmal vielen Dank!

Gruß
Christian

[ChrisPHL]

zu 1: Der Form halber hast du sicher recht, aber das ist aus technischen Gründen nicht umsetzbar.
zu 2: Danke, wieder was gelernt. Das ist für mich aus dem bis dato gelesenen nicht hervorgegangen.
zu 3: Stimmt, die Funktion wird bei Klick auf beide Buttons ausgeführt, es ist aber definitiv so, das das Formular nur beim Klick auf den "echten" Submitbutton übertragen wird.
Das gefällt mir im Prinzip auch, an der Stelle ist mir eine Lösung, die erkennt, welcher Buttoon gedrückt wurde lieber als ein "<button></button>". (Wenn es denn eine gibt.)

Habt Ihr da noch Ideen?

Gruß
Christian