In Funktion auslagern

[Kjorni]

Hallo Forum,

ich möchte mit onclick eine Funktion aufrufen. Bisher ist meine Umsetzung nicht in einer Funktion, sondern im HTML bzw. php-code selber.

<input type='submit' name="sendebutton[".$row[5]."]" value='Ändern' onclick="this.form.action += '#".$anker."'">

Da ich aber noch ein paar Javascriptfunktionen mehr an das onclick-event anhängen möchte, muß ich das in eine Funktion auslagern.

Ich vermute, dass ich das in etwa so machen sollte?

<input type='submit' name="sendebutton[".$row[5]."]" value='Ändern' onclick="meine_funktion($anker)">

1. Stimmt das so?
2. Die Funktion selber.
   function meine_funktion(durchlauf) {
   this.form.action += '#' + durchlauf
   }

Im HTML-Quelltext erhalte ich dann z.b.:

<input type='submit' name="sendebutton[13]" value='Ändern' onclick="meine_funktion(19)">

So hatte ich mir das auch gedacht.
Aber meine Funktion macht nicht das, was ich gerne hätte.

Über ein eingefügtes:

alert ("Anker" + anker);

stelle ich fest, dass mein Parameter korrekt übergeben wurde.

Also sollte der Fehler in this.form.action liegen.

Ab hier weiß ich nicht weiter und bitte freundlichst um Unterstützung.

Viele Grüße und schönen Tag

Kjorni

[Encoder]

Was soll denn eigentlich passieren wenn du form.action was zuweist?

[Kjorni]

Was soll denn eigentlich passieren wenn du form.action was zuweist?

Es soll ein URL-Parameter für den Ankerverweis angehängt werden.

...#29 zum Beispiel.

Gruß, Kjorni

[Cheatah]

Hi,

<input type='submit' name="sendebutton[".$row[5]."]" value='Ändern' onclick="meine_funktion($anker)">

1. Stimmt das so?

nein. Die Backslashes sind allesamt ungültiges HTML. Wenn Du sie entfernst, ist nach Abschluss des Attributs name="sendebutton[" der Teil .$row[5]."]" kein gültiges HTML. Die Variable $anker muss dem JavaScript-Code bekannt sein, andernfalls ergibt das einen Fehler.

2. Die Funktion selber.
   function meine_funktion(durchlauf) {
   this.form.action += '#' + durchlauf
   }

this ist in diesem Zusammenhang ... was?

Im HTML-Quelltext erhalte ich dann z.b.:

<input type='submit' name="sendebutton[13]" value='Ändern' onclick="meine_funktion(19)">

Obiger JavaScript-Code wird, sofern er trotz des defekten HTML-Codes überhaupt ausgeführt wird, vermutlich einen Fehler werfen. Ich sehe nicht, dass daraus dieser HTML-Code resultieren sollte.

Ab hier weiß ich nicht weiter und bitte freundlichst um Unterstützung.

this wäre im Kontext des Event-Handlers das, was Du suchst, nicht jedoch im Kontext der Funktion. Korrigiere jedoch zunächst Deinen HTML-Code - er ist so kaputt, dass er den Anschein erweckt, PHP-Code zu sein.

Cheatah

[Kjorni]

this wäre im Kontext des Event-Handlers das, was Du suchst, nicht jedoch im Kontext der Funktion. Korrigiere jedoch zunächst Deinen HTML-Code - er ist so kaputt, dass er den Anschein erweckt, PHP-Code zu sein.

Es ist php-code, aber das schrieb ich auch.

Was ist mit this?

Gruß, Kjorni

[ChrisB]

Hi,

Es ist php-code, aber das schrieb ich auch.

Serverseitiger Code ist aber bei einem clientseitigen Problem reichlich uninteressant.

Was ist mit this?

http://molily.de/js/organisation-verfuegbarkeit.html

MfG ChrisB

[Kjorni]

Was ist mit this?

http://molily.de/js/organisation-verfuegbarkeit.html

MfG ChrisB

Danke für den Link, Chris.

Gruß, Kjorni

[molily]

Was ist mit this?

Das Schlüsselwort this löst je nach Kontext zu einem unterschiedlichen Objekt auf. Allgemein gilt: Wenn eine Funktion über objekt.methode() als Methode eines Objekts aufgerufen wird, zeigt this auf das Objekt. Andernfalls zeigt es als Rückgriff auf das globale Objekt window.

<form onsubmit="[code lang=javascript]alert(this)">[/code]

Hier zeigt this auf das form-Element, weil intern eine Funktion erzeugt wird, die in der Eigenschaft onsubmit des form-Elementobjekts gespeichert wird. Beim Eintreten des Ereignisses wird intern sozusagen formElement.onsubmit(event) aufgerufen, daher zeigt this auf das form-Elementobjekt.

<script>  
[code lang=javascript]function meinefunk () {  
   alert(this);  
}

</script
<form onsubmit="meinefunk()">[/code]

Hier zeigt this nicht mehr auf das form-Element, sondern mangels Kontext auf das globale Objekt window. »this« vererbt sich hier also nicht.

Wenn du in der ausgelagerten Funktion auf das Formular zugreifen willst, dann kannst du das DOM-Elementobjekt an die Funktion als Parameter übergeben (hier wird auch zusätzlich das Event-Objekt übergeben):

<script>  
[code lang=javascript]function meinefunk (event, formElement) {  
   alert(formElement);  
}

</script
<form onsubmit="meinefunk(event, this)"> [/code]

Siehe auch
http://molily.de/js/organisation-verfuegbarkeit.html#this
http://www.quirksmode.org/js/this.html
http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

Mathias

[Kjorni]

Was ist mit this?

Das Schlüsselwort this löst je nach Kontext...

Mathias

Hallo Mathias,

wow, was für eine geniale Erklärung mit allem drum und dran! Superklasse und vielen vielen Dank dafür!!

Vor allem für die ergänzenden Beispiele!

Und nun les ich mir die Seiten hinter Deinen Links durch.

Nochmals vielen Dank und schönen Sonntag, Kjorni

[Kjorni]

Hallo,

anschließend an mein Doppelposting muß ich doch nochmal nachfragen.

Wie ändere ich in meiner Javascript-Funktion die formular-action?

Hier das HTML:

<form name = "form_40">  
<input type='submit' id='sende_button' name="sendebutton[40]" value='Ändern' onclick="my_function(25, 'form_40')">  
</form>

Javascript:

function my_function(anker, id) {  
id.form.action += '#' + anker;  
}

Das ergibt aber nicht das gewünschte URL-Ergebnis, das wie folgt aussehen sollte:

http://localhost/myscript.php#25

Viele Grüße, Kjorni

[Der Martin]

Hi,

Wie ändere ich in meiner Javascript-Funktion die formular-action?

indem du der action-Eigenschaft des Formularobjekts einen neuen Wert zuweist.

<form name = "form_40">

<input type='submit' id='sende_button' name="sendebutton[40]" value='Ändern' onclick="my_function(25, 'form_40')">
</form>

  
Das Formular hat kein action-Attribut, es gilt also der Defaultwert "", was einem Versenden "an sich selbst" entspricht.  
Warum hängst du das Event eigentlich an onclick des Submit-Buttons? Soll es nicht auslösen, wenn man das Formular normal durch Drücken der Enter-Taste absendet? Der onsubmit-Handler des Formulars selbst erscheint mir für dieses Vorhaben geeigneter - ganz abgesehen davon, dass der Zugriff auf das Formularobjekt sich dann fast von allein ergibt.  
  

> ~~~javascript

function my_function(anker, id) {  

> id.form.action += '#' + anker;  
> }

Beim Aufruf dieser Funktion aus dem obigen Eventhandler heraus hat anker den Wert 25, id ist ein String mit dem Wert "form_40". Du willst dann die nicht existierende Eigenschaft form.action des übergebenen String-Objekts auslesen (->Javascript-Fehler) und ihm "#25" anhängen.

Auf das Formularobjekt greifst du aber nicht im Entferntesten zu.

Ciao,
 Martin

[Kjorni]

Hi Martin,

Das Formular hat kein action-Attribut, es gilt also der Defaultwert "", was einem Versenden "an sich selbst" entspricht.

Ja. Das ist so gewollt.

Warum hängst du das Event eigentlich an onclick des Submit-Buttons? Soll es nicht auslösen, wenn man das Formular normal durch Drücken der Enter-Taste absendet?

Ich habe sehr viele Submit-Buttons, deshalb brauchte ich das nicht so zu berücksichtigen.

Der onsubmit-Handler des Formulars selbst erscheint mir für dieses Vorhaben geeigneter - ganz abgesehen davon, dass der Zugriff auf das Formularobjekt sich dann fast von allein ergibt.

Weil sich dann ein übergebenes "this" auf das form-element bezieht?

Du willst dann die nicht existierende Eigenschaft form.action des übergebenen String-Objekts auslesen (->Javascript-Fehler) und ihm "#25" anhängen.

Auf das Formularobjekt greifst du aber nicht im Entferntesten zu.

Ok. Mir scheint Dein Tip (onsubmit)auch der geeignetere Weg zu sein. Trotzdem, wie würde ich denn bei onclick auf das Formularobjekt zugreifen können?
Und weiter, könnte ich eigentlich auch bei onclick über "this" auch auf das Formularobjekt zugreifen? Ich komme immer nur bis [objectHTML], wenn ich das versucht habe.

Grüße, Kjorni

[Der Martin]

Hallo,

Der onsubmit-Handler des Formulars selbst erscheint mir für dieses Vorhaben geeigneter - ganz abgesehen davon, dass der Zugriff auf das Formularobjekt sich dann fast von allein ergibt.
Weil sich dann ein übergebenes "this" auf das form-element bezieht?

ganz genau.

Ok. Mir scheint Dein Tip (onsubmit)auch der geeignetere Weg zu sein. Trotzdem, wie würde ich denn bei onclick auf das Formularobjekt zugreifen können?

Auch beim onclick auf einem Submit-Button kannst du 'this' an den Eventhandler übergeben; 'this' steht dann für das Submit-Elementobjekt. Dann kannst du ausnutzen, dass alle Formularelemente in einer Eigenschaft namens form eine Referenz auf ihr übergeordnetes Formular haben.
Mit anderen Worten:
this entspräche in diesem Szenario dem Submit-Button
this.form entspräche "seinem" Formular

Und weiter, könnte ich eigentlich auch bei onclick über "this" auch auf das Formularobjekt zugreifen? Ich komme immer nur bis [objectHTML], wenn ich das versucht habe.

Wie hast du es denn versucht?

Ciao,
 Martin

[Kjorni]

Hi,

Weil sich dann ein übergebenes "this" auf das form-element bezieht?

ganz genau.

Verstehe.

Auch beim onclick auf einem Submit-Button kannst du 'this' an den Eventhandler übergeben; 'this' steht dann für das Submit-Elementobjekt. Dann kannst du ausnutzen, dass alle Formularelemente in einer Eigenschaft namens form eine Referenz auf ihr übergeordnetes Formular haben.

Ah, ok. Javascript und Objektorientierzung sind für mich schon noch sehr neu.

Mit anderen Worten:
this entspräche in diesem Szenario dem Submit-Button
this.form entspräche "seinem" Formular

Gut.

Wie hast du es denn versucht?

Na, so wie eingangs schon erwähnt.

Aber wie ich schon sagte. Ich finde Dein Argument für onsubmit schlüssig.

Ich habe es nun so gelöst:

<form action='' method='post' onsubmit="myfunktion(32, this)">  
<input type='submit' id='sbutton' value='Ändern'>  
<input type='hidden' name='sb' value="28">  
</form>

  
function myfunktion(anker, id) {  
id.action += '#' + anker;  
}  

Danke für die Hilfe

Kjorni
Und nun funktioniert es auch so, wie gewünscht im Ergebniss.