Submitbutton & Rollover

[Boris]

Hallo!!!

Ich hab schon das ganze Forum durchsucht, aber so richtig helfen konnte keiner der einträge, und dass obwohl mein problem schon recht konkret formuliert wurde.

Okay.

1. Ich hab ein Formular, und dessen inhalt soll an ein cgi übergeben werden.
2. Ich habe zwei Submitbuttons.
3. Beide submitbuttons sind (unterschiedliche) bilder und sollen einen rollover haben.
4. Beide Buttons sollen das gleiche <input>-Textfeld übergeben.
5. Welcher von den beiden Buttons gedrückt wurde, soll auch an das cgi übergeben werden

Die meisten Rollover-hilfen hier im forum beziehen sich auf normale <img>-Tags, die durch <a>-Tags eingeklammert sind. Das hilft aber m.E. nicht weiter, weil ich doch wohl ein <input>-Tag brauche.

Der beste hinweis bisher war:

<FORM action="losgehts.cgi" method=get>
...
<SCRIPT language="JavaScript">
<!--
document.write("<A href='javascript:this.form.submit()' onmouseover='bild.src = "bild2.gif"' onmouseout='bild.src = "bild1.gif"'><IMG src='bild1.gif' name='bild'></A>");
//-->
</SCRIPT>
<NOSCRIPT>
<INPUT type="submit" value="senden">
</NOSCRIPT>
</FORM>

Leider wird nichts an das cgi übergeben.

wo ist mein denkfehler? ist das problem überhaupt lösbar??

danke,
Boris

[TomIRL]

Leider wird nichts an das cgi übergeben.

wo ist mein denkfehler? ist das problem überhaupt lösbar??

Was steht denn in Deiner Browserzeile drin (dank get müßte das ja lesbare sein)?
Hast Du mal nachgeguckte welche Werte überhaupt beim Skript ankommen?
Tritt das Problem in allen Browsern auf oder nur im IE?
Welche Werte benötigt Dein Skript?

TomIRL

[Boris]

Hi Tom!

Was steht denn in Deiner Browserzeile drin (dank get müßte das ja lesbare sein)?

Es werden (dank der hilfe von Sebastian) überhaupt werte übergeben. Vorher ging zwar der rollover, aber es wurde das Script überhaupt nicht aufgerufen.

Hast Du mal nachgeguckte welche Werte überhaupt beim Skript ankommen?

Jetzt werden alle Abfragefelder des Formulars übergeben, bis auf den namen des buttons selber. und den Braucht mein script aber eigentlich auch, weil ich zwei buttons innerhalb eines Forms plane. womit wir beim nächsten problem wären. Das JS läuft nur mit einem button.

Ich hab mir meinen Text eben nochmal durchgelesen ... verwirrt mich selber ... nochmal mit etwas mehr struktur :)))

Ich habe ein Eingabefeld und zwei verschiedene Rolloverbuttons. Mein Perl-Script braucht den inhalt des Feldes und den wert (oder eine andere identifizierung) des gewählten buttons. D

Das ist es, was ich will und ich bin mir nichtmal sicher, ob mein beispielansatz überhaupt der richtig weg ist, weil da immer nur ein Button möglich ist. ... äh, man merkt vielleicht, dass ich nicht der JS-Held bin. Grundsätzlich verstehe ich vieles schon, die <script> <nocsipt> zusammenhänge sind mir aber immer noch ein rätsel.

[TomIRL]

Ich hatte vor ein paar Tagen das gleiche Problem:
Probiere mal diese Lösung:
Da dürfte dann auch die Übergabe von Werten kein Problem mehr sein:

http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern

VieleGrüße TomIRL

[Cybaer]

Hi,

die <script> <nocsipt> zusammenhänge sind mir aber immer noch ein rätsel.

<script> wird ausgeführt, wenn der Browser Scripting beherrscht (und es aktiviert ist), der NOSCRIPT-Bereich wird vom Browser angezeigt, wenn der Browser kein Scripting beherrscht (oder es deaktiviert ist).

Gruß, Cybaer

PS: Bis auf den Netscape Navigator 2 - der interpretiert den NOSCRIPT-Bereich immer ;-)

[Sebastian Becker]

Hallo,

Leider wird nichts an das cgi übergeben.
wo ist mein denkfehler? ist das problem überhaupt lösbar??

Du kannst das Formular an der Stelle nicht mit this.form ansprechen. Versuch's mal so (s.u.) ...

Grüße,

Sebastian

<FORM action="losgehts.cgi" method="get" id="form1" name="form1">
...
<SCRIPT language="JavaScript">
<!--
document.write("<A href='javascript:form1.submit()' onmouseover='bild.src = "bild2.gif"' onmouseout='bild.src = "bild1.gif"'><IMG src='bild1.gif' name='bild'></A>");
//-->
</SCRIPT>
<NOSCRIPT>
<INPUT type="submit" value="senden">
</NOSCRIPT>
</FORM>

[Boris]

Hi Sebastian!

1000 dank für deine Hilfe, jetzt läutf das JS jedenfalls soweit, dass überhaupt werte übergeben werden. Nun kämpfe ich noch mit den beiden problemen, dass ich zwei sendebuttons habe und dass ich die gedrückten buttons identifizieren kann.

kannste mir im groben erklären, wie das beispielscript abläuft? Ich verstehe zwar, dass mit document.write() eine ausgabe erfolgt, aber nicht woher das JS weiss, wohin. Die Rolle von javascript:form1.submit() ist mir auch nicht ganz klar. Kann ich z.B. an anderer Stelle im HTLM mit javascript:form2.submit() auf ein beliebiges Form verweisen?

[Cybaer]

Hi,

Nun kämpfe ich noch mit den beiden problemen, dass ich zwei sendebuttons habe und dass ich die gedrückten buttons identifizieren kann.

Was hast Du denn an meinem Tip mit dem Hidden-INPUT nicht verstanden?

Gruß, Cybaer

[Sebastian Becker]

Hallo, Boris,

kannste mir im groben erklären, wie das beispielscript abläuft?
Ich verstehe zwar, dass mit document.write() eine ausgabe erfolgt,
aber nicht woher das JS weiss, wohin.

Der Link wird deshalb mit JavaScript erzeugt, weil der Aufruf "form1.submit()" nur mit JavaScript funktioniert und der Link daher auch nur bei aktiviertem JavaScript angezeigt werden soll. Andernfalls wird der Submit-Befehl mit dem im Noscript-Tag stehenden Button erzeugt. Zumindest funktioniert es so in dem von Dir geposteten Skript - ich weiß nicht, ob Du es so haben willst.

Formulare werden immer an die durch "action" definierte URL geschickt, ganz egal wie sie aufgerufen werden. Das JavaScript muss daher eigentlich nicht "wissen", wohin das Formular geschickt wird. Allerdings könnte man mit JavaScript den "action"-Parameter auslesen oder manipulieren.

Die Rolle von javascript:form1.submit() ist mir auch nicht ganz klar.
Kann ich z.B. an anderer Stelle im HTLM mit javascript:form2.submit()
auf ein beliebiges Form verweisen?

Du kannst natürlich an jeder beliebigen Stelle im HTLM-Code Deiner Seite z.B. mit "javascript:form1.submit()" oder "javascript:form2.submit()" ein Formular mit dem entsprechenden Namen absenden - immer mit der Einschränkung, daß JavaScript aktiviert ist.

Die meisten Rollover-hilfen hier im forum beziehen sich auf normale
<img>-Tags, die durch <a>-Tags eingeklammert sind. Das hilft aber
m.E. nicht weiter, weil ich doch wohl ein <input>-Tag brauche.

Das input-Tag muß ins Formular, und die Rolloverfunktion hast Du ja schon. Nicht vergessen, das Bild vorzuladen!

Nun kämpfe ich noch mit den beiden problemen, dass ich zwei sendebuttons
habe und dass ich die gedrückten buttons identifizieren kann.

Du könntest z.B. ein verstecktes, d.h. nicht sichtbares, Inputfeld in Deinem Formular anlegen, dessen Wert in Abhängigkeit von dem Link, mit dem Du das Formular absendest, geändert wird.

Dein Code sähe dann in etwa so aus (ungetestet) ...

<script language=JavaScript>
<!--
// preload images
if(document.images)
{
bild1 = new Image();
bild1.src = "bild1.gif";
bild1_over = new Image();
bild1_over.src = "bild1_over.gif";

bild2 = new Image();
bild2.src = "bild2.gif";
bild2_over = new Image();
bild2_over.src = "bild2_over.gif";
}
// -->
</script>

<a href="losgehts.cgi?parameter=1" onClick="document.form1.parameter.value='1';form1.submit();return false;" onMouseover="bild1.src='bild1_over.gif'" onMouseout="bild1.src='bild1.gif'"><img src="bild1.gif" name="bild1"></a>

<a href="losgehts.cgi?parameter=2" onClick="document.form1.parameter.value='2';form1.submit();return false;" onMouseover="bild2.src='bild2_over.gif'" onMouseout="bild2.src='bild2.gif'"><img src="bild2.gif" name="bild2"></a>

<form action="losgehts.cgi" method="get" id="form1" name="form1">
<input type="hidden" value="" name="parameter">
<noscript><input type="submit" value="senden"></noscript>
</form>

In den Link habe ich als URL Dein "losgehts.cgi" eingesetzt, dem ich noch den Parameter übergeben habe, damit die Information über das angeklickte Bild auch ohne JavaScript an das serverseitige Skript weitergeleitet wird. Diese URL wird wegen des "return false" bei aktiviertem JavaScript nicht übergeben.

Wenn bei Deinem Server PHP aktiviert ist, würde ich die Auswertung übrigens mit PHP vornehmen.

Grüße,

Sebastian

[Cybaer]

Hi,

<a href="losgehts.cgi?parameter=1"

Hier wird kein Formular mit seinen (ggf. vielen) Werten gesendet, sondern *ein* URL mit *einem* *festdefinierten* Parmeter aufgerufen.

Will man genau das, braucht man überhaupt kein Formular. Braucht man ein Formular, ist es IMHO unsinnig.

Gruß, Cybaer

[Sebastian Becker]

Hi, Cybaer

<a href="losgehts.cgi?parameter=1"

Hier wird kein Formular mit seinen (ggf. vielen) Werten gesendet, sondern *ein* URL mit *einem* *festdefinierten* Parmeter aufgerufen.
Will man genau das, braucht man überhaupt kein Formular. Braucht man ein Formular, ist es IMHO unsinnig.

da hast Du im Prinzip Recht - war ja auch nur ein Denkanstoß ...

Allerdings wird die URL ohnehin nur aufgerufen, wenn JavaScript deaktiviert ist. Dann hat man zwar nicht die Formularinhalte, aber immerhin den Parameter übertragen.

Es kommt natürlich immer darauf an, wie die Anforderungen sind (die ich nicht kenne) bzw. wie man die Prioritäten setzt. Man könnte natürlich auch die URLs, die das Formular abschicken, mit JavaScript schreiben, damit sie nur bei aktiviertem JavaScript zu sehen sind ...

Grüße,

Sebastian

[Cybaer]

Hi,

Die meisten Rollover-hilfen hier im forum beziehen sich auf normale <img>-Tags, die durch <a>-Tags eingeklammert sind. Das hilft aber m.E. nicht weiter, weil ich doch wohl ein <input>-Tag brauche.

Dann mache einen "W3C-DOM-2"-konformen Rollover, indem Du das SRC-Attribut des grafischen Submit-Buttons mittels setAttribute wechselst.

Aber: Ein Formular hat ja i.d.R. nur einen Submit-Button. Wenn Du mehrere (normale Grafiken) nimmst und dann mittels onClick und submit() arbeitest (was dann ohne JavaScript nicht mehr gleichwertig zu lösen ist!), schreibe in der onClick-Routine einen Wert in ein Hidden-INPUT. Je nach dessen Wert, wurde der entsprechende "Fake-Submit-Button" geklickt.

Gruß, Cybaer

[Boris]

Hi Cybaer!

Dann mache einen "W3C-DOM-2"-konformen Rollover, indem Du das SRC-Attribut des grafischen Submit-Buttons mittels setAttribute wechselst.

Wenn ich Dich und JS richtig verstehe müsste das etwa so aussehen:

<script type="javascript">
<!--
function Wechsel() {
document.all.Wechsel.setAttribute("src","Bild2.gif","false");
}
//-->
</script>
...
<html>
 <input  id="Wechsel" onMouseOver="Wechsel()"
   type="image" src="Bild1.gif" name="Bild1">
</html>

An diesem Beispiel sieht man, dass es nicht geht UND dass ich keine ahnung von JS habe :)) wahrscheilich lachen mich alle JS-Coder die das lesen grade aus.
Ich vermute, dass sich das onMouseOver-event nur auf imgs beziehen und src nicht "grafik"-dynamisch sein kann. Aber vielleicht liege ich auch falsch.

<a href="test.cgi"
   onMouseOver="Bildwechsel(0,Highlight1)"
   onMouseOut="Bildwechsel(0,Normal1)">
   <img  src="Bild1" name="Bild1">
   </a>

Diese Variante (mit dazugehörigen Script) funktioniert, was den Rollover betrifft.
Bei der Variante:

<a href="test.cgi"
   onMouseOver="Bildwechsel(0,Highlight1)"
   onMouseOut="Bildwechsel(0,Normal1)">
   <input type="image" src="Bild1" name="Bild1">
</a>

versagt der Rollover, aber das INPUT-Tag arbeitet 1a.

Aber: Ein Formular hat ja i.d.R. nur einen Submit-Button. Wenn Du mehrere (normale Grafiken) nimmst und dann mittels onClick und submit() arbeitest (was dann ohne JavaScript nicht mehr gleichwertig zu lösen ist!), schreibe in der onClick-Routine einen Wert in ein Hidden-INPUT. Je nach dessen Wert, wurde der entsprechende "Fake-Submit-Button" geklickt.

Das hört sich vielversprechend an. Mal angenommen ich erzeuge einen Rollover mit:

<form name="Testform" action="echtes.cgi" method="get">
<input type="hidden" value="hiddenValue" name="hiddenName">
<a href="unrelevantes.cgi"
   onMouseOver="Bildwechsel(0,Highlight1)"
   onMouseOut="Bildwechsel(0,Normal1)"
   onClick="SendeFunktion()">
   <img  src="Bild1" name="Bild1">
   </a>
</form>

und erweitere unter den onMouse-Routinen ein onClick mit verweis auf eine eigene Funktion, die dann mittels setAttribute das Hidden-Tag modifiziert und am schluss mit submit() und verweis auf "Testform" sendet.

Verstehe ich dich richtig?

[Cybaer]

Hi,

<script type="javascript">

type="text/javascript" language="JavaScript"

Das nicht-standardisierte LANGUAGE kann ruhig für alte Browser stehenbleiben. ;-) Andererseits gibt es eh keinen Browser, der nicht ohnehin nur mit LANGUAGE zufrieden wäre. Aber das ist halt nicht standardisiert.

function Wechsel() {
document.all.Wechsel.setAttribute("src","Bild2.gif","false");
}

Im Prinzip ja, ist aber IE-proprietär! Statt document.all.Wechsel nimm document.getElementById('Wechsel')! Dafür entfällt auch das "false". ;-)

Und der Wechsel sollte mit einem if(document.getElementById) { } umklammert werden, um auf Browsern mit DOM Level <2 keinen Fehler zu erzeugen.

An diesem Beispiel sieht man, dass es nicht geht

Jetzt schon. :-)

UND dass ich keine ahnung von JS habe :)) wahrscheilich lachen mich alle JS-Coder die das lesen grade aus.

Nö, warum. Und hier gibt es weitaus "schlimmeres" zu sehen! 8-)

Ich vermute, dass sich das onMouseOver-event nur auf imgs beziehen und src nicht "grafik"-dynamisch sein kann. Aber vielleicht liege ich auch falsch.

Yup - zweimal.

versagt der Rollover, aber das INPUT-Tag arbeitet 1a.

? Den Code verstehe ich nicht? SUBMIT ist für FORM - As haben da nichts zu suchen.

und erweitere unter den onMouse-Routinen ein onClick mit verweis auf eine eigene Funktion, die dann mittels setAttribute das Hidden-Tag modifiziert und am schluss mit submit() und verweis auf "Testform" sendet.
Verstehe ich dich richtig?

Fast. Laß die As weg und nimm INPUT s.o.. Dann noch ein INPUT type="hidden". Da kannst Du den Wert VALUE mit setAttribute (DOM Level 2), aber auch direkt (DOM Level 0) setzen.

Also: onClick="document.forms['Testform'].elements['hiddenName'].value='Bild1';"

Gruß, Cybaer

[TomIRL]

Hi,

Die meisten Rollover-hilfen hier im forum beziehen sich auf normale <img>-Tags, die durch <a>-Tags eingeklammert sind. Das hilft aber m.E. nicht weiter, weil ich doch wohl ein <input>-Tag brauche.

Dann mache einen "W3C-DOM-2"-konformen Rollover, indem Du das SRC-Attribut des grafischen Submit-Buttons mittels setAttribute wechselst.

Aber: Ein Formular hat ja i.d.R. nur einen Submit-Button.

Nen warum sollte ein Formular nur eine Submit Button haben?

Wenn Du mehrere (normale Grafiken) nimmst und dann mittels onClick und submit() arbeitest (was dann ohne JavaScript nicht mehr gleichwertig zu lösen ist!), schreibe in der onClick-Routine einen Wert in ein Hidden-INPUT. Je nach dessen Wert, wurde der entsprechende "Fake-Submit-Button" geklickt.
No...
http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern
Da kannst Du den button verschiedene Werte mitsenden lassen, hab ich bis vor kurzem auch nicht gewußt, weil das ganze Thema ziemlich versteckt ist.
Den Button mußt Du dann natürlich noch mit CSS ein wenig schön machen.
TomIRL

[Cybaer]

Hi,

Aber: Ein Formular hat ja i.d.R. nur einen Submit-Button.
Nen warum sollte ein Formular nur eine Submit Button haben?

Weil Du mehrere ggf. ohnehin nicht unterscheiden kannst.

Und "Form senden" sowie "Form ebenfalls senden" finde ich recht überflüssig, wenn es exakt dasselbe tut. =:-) Es ist sogar (eigentlich) eine Grundregel des Web-Designs, nicht dieselbe Aktion auf einer Seite hinter verschiedene Bezeichnungen zu packen.

Wenn Du mehrere (normale Grafiken) nimmst und dann mittels onClick und submit() arbeitest (was dann ohne JavaScript nicht mehr gleichwertig zu lösen ist!), ...
No...

IMHO sehr wohl.

http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern

Wenn Du Dir das Beispiel anschaust, wirst Du sehen, daß mit onClick gearbeitet wird. Das ist aber der Fall, den ich oben als Negativbeispiel aufgeführt habe, weil es ohne JS nicht mehr gleichwertig zu lösen ist (jedenfalls wenn es sich um mehrere Sende-Buttons handelt, was ja im Beispiel nicht so ist - wohl aber hier im Thread). Denn: Kein JS = kein onClick. Und was davon zu halten ist, Aktionen (auch noch unnötigerweise) von JS abhängig zu machen, sollte bekannt sein.

Da kannst Du den button verschiedene Werte mitsenden lassen,

Schon klar, aber es ist eben *kein* *Submit*-Button!

Gruß, Cybaer

[TomIRL]

Hi,

Aber: Ein Formular hat ja i.d.R. nur einen Submit-Button.
Nen warum sollte ein Formular nur eine Submit Button haben?

Weil Du mehrere ggf. ohnehin nicht unterscheiden kannst.

Doch kann man...
Über den value..

Und "Form senden" sowie "Form ebenfalls senden" finde ich recht überflüssig, wenn es exakt dasselbe tut. =:-) Es ist sogar (eigentlich) eine Grundregel des Web-Designs, nicht dieselbe Aktion auf einer Seite hinter verschiedene Bezeichnungen zu packen.

Es passiert eben nicht genau das selbe, siehe Blätterfunktionen auf die nächste Seite und zurück z.Bsp u.s.w.
Es gibt tausende Anwendungsfälle wo Deine Aussage so nicht stimmt.

Wenn Du mehrere (normale Grafiken) nimmst und dann mittels onClick und submit() arbeitest (was dann ohne JavaScript nicht mehr gleichwertig zu lösen ist!), ...
No...

IMHO sehr wohl.

http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern

Wenn Du Dir das Beispiel anschaust, wirst Du sehen, daß mit onClick gearbeitet wird. Das ist aber der Fall, den ich oben als Negativbeispiel aufgeführt habe, weil es ohne JS nicht mehr gleichwertig zu lösen ist (jedenfalls wenn es sich um mehrere Sende-Buttons handelt, was ja im Beispiel nicht so ist - wohl aber hier im Thread). Denn: Kein JS = kein onClick. Und was davon zu halten ist, Aktionen (auch noch unnötigerweise) von JS abhängig zu machen, sollte bekannt sein.

Wenn Du Dir obiges Beispiel genau angesehen hättest, dann hättest Du folgendes erkannt:

<button name="new" value="Neue Daten" type="submit">
<img src="images/butt-speichern.gif" alt="&Auml;ndern">
</button>

Funktioniert und erfüllt den Zweck!
Man muß halt nur den value austauschen.

Da kannst Du den button verschiedene Werte mitsenden lassen,

Schon klar, aber es ist eben *kein* *Submit*-Button!

Was sonst?

Viele Grüße TomIRL

[Cybaer]

Hi,

<button name="new" value="Neue Daten" type="submit">
<img src="images/butt-speichern.gif" alt="&Auml;ndern">
</button>

Funktioniert und erfüllt den Zweck!

Hmm, korrrekt! =:-o

Man muß halt nur den value austauschen.

Dann selbstredend ... :-) Daß submit hier ein gültiger Wert für type ist (genauer: sogar der Default-Wert), habe ich glatt übersehen.

Gruß, Cybaer

PS: Der BUTTON, mangels Abwärtskompatibilität - selbst zu noch verwendeten Browsern -, trotzdem nicht ohne Not verwenden würde. :)

[TomIRL]

Hallo Cybaer,

PS: Der BUTTON, mangels Abwärtskompatibilität - selbst zu noch verwendeten Browsern -, trotzdem nicht ohne Not verwenden würde. :)

Welcher Antikbrowser akzeptiert das nicht?
Und was macht der wenn er die Anweisung "Button" nicht kennt?
Druckt er den Alt Text?

TomIRL

[Cybaer]

Hi,

Welcher Antikbrowser akzeptiert das nicht?

? Steht doch in selfHTML: Der Navigator 4.x (sowie ältere). Und der wird immer noch eingesetzt.

Und was macht der wenn er die Anweisung "Button" nicht kennt?
Druckt er den Alt Text?

Er macht, was alle Browser mit ihnen unbekannten Tags zu machen haben: ignorieren. D.h., was innerhalb von <button> </button> steht, wird natürlich angezeigt. Die Funktionalität von BUTTON selbst fehlt.

Gruß, Cybaer