mit radio button wert an function übergeben

[javascriptnewbie]

Hallo,
habe einen Seite auf der eine Tabelle ausgegeben wird (alles in PHP und wie Werte kommen aus einer mysql)
Ich habe nun in jeder Zeile einen radio-button damit bei klick einen javascript function aufgerufen wird.
Diese function generiert für ein innerHTML einen html-code damit auf der fleichen Seite eine weitere Tabelle ausgegeben wird.

In der javascript function benötige ich jedoch Werte aus der Tabelle (die in jeder Zeile den radio-buuton hat)
z.B. Zeilen_Id, Wert_1 etc.

Normal übergebe ich diese werte via $_POST['Zeilen_Id'] , $_POST['Wert_1'] wenn im HTMLcode z.B.

<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.'></input>
und/oder
<input type="hidden" name="Wert_1" value='.$row->Wert_1.'></input>

wie muss ich das bei javascript machen

Grüße Jürgen

[molily]

Hallo,

Normal übergebe ich diese werte via $_POST['Zeilen_Id'] , $_POST['Wert_1'] wenn im HTMLcode z.B.

<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.'></input>
und/oder
<input type="hidden" name="Wert_1" value='.$row->Wert_1.'></input>

Den Wert kannst du per JavaScript auslesen, indem du dir das Element holst und die value-Eigenschaft ausliest. Beispiel:

document.getElementsByName('Zeilen_Id')[0].value  
document.getElementsByName('Wert_1')[0].value

… würde das erste Element mit dem jeweiligen Namen ansprechen.

Alternative:
document.forms.formularname.elements.Wert_1[0].value

… gegeben das Formular hat einen entsprechenden Namen oder ID: <form id="formularname">.

Das liefert dir jeweils den Wert als String, den kannst du zum Server senden.

getElementsByName:
http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name

document.forms.X.elements.Y:
http://de.selfhtml.org/javascript/objekte/forms.htm#allgemeines
http://de.selfhtml.org/javascript/objekte/elements.htm#allgemeines
http://de.selfhtml.org/javascript/objekte/elements.htm#value
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#input

Falls du den Namen des Formularfeldes nicht weißt oder es mehrere Felder mit dem Namen gibt, müsstest du es über das DOM heraussuchen, ausgehend vom geklickten Element. Du schriebst ja, dass sich die Elemente in derselben Tabellenzeile befinden. Wie sieht das HTML denn genau aus? Zeig uns am besten Mal den relevanten Code.

Mathias

[javascriptnewbie]

Hallo,

Normal übergebe ich diese werte via $_POST['Zeilen_Id'] , $_POST['Wert_1'] wenn im HTMLcode z.B.

<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.'></input>
und/oder
<input type="hidden" name="Wert_1" value='.$row->Wert_1.'></input>

Den Wert kannst du per JavaScript auslesen, indem du dir das Element holst und die value-Eigenschaft ausliest. Beispiel:

document.getElementsByName('Zeilen_Id')[0].value

document.getElementsByName('Wert_1')[0].value

>   
> … würde das erste Element mit dem jeweiligen Namen ansprechen.  
>   
> Alternative:  
> `document.forms.formularname.elements.Wert_1[0].value`{:.language-javascript}  
>   
> … gegeben das Formular hat einen entsprechenden Namen oder ID: `<form id="formularname">`{:.language-html}.  
>   
> Das liefert dir jeweils den Wert als String, den kannst du zum Server senden.  
>   
> getElementsByName:  
> <http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name>  
  

>   
> Mathias  
  
vielen Dank für die Ausführung.  
  
Frage:  
ich rufe ja über den radio button eine javascript funktion auf  
  
also  
~~~html
  
echo '<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.' onclick="function1();"></input>  

kann ich dann IN der funktion mit
document.getElementsByName('Wert_1')[0].value
auf den Wert zugreifen oder muss ich diesen via Variable übergeben?
also in der onclick="function1($wert_1, $Wert_2 etc)
?

Ich möchte zusätzlich noch anhand  eines Wertes eine bestimte funktion aufrufen

ich bekomme also im PHP code und in der Tabelle Zahlenwerte. also z.B. 1,2,3,4 oder 5
ich brauche oben jetzt 5 versch. funktionen
also
function_1()
function_2()

etc.
wie kann ich das am besten machen da ich ja in der Zeile mit dem radio button und dem onclick="function_1() ja nur eine bestimmte funktion aufrufen kann

ich habe also in der Tabelle mit den radio buttons auch eine wert aus einer db z.B. $row->Gruppen_ID, diese enthält entweder 1, 2, 3 .... udn anhand dieser muss ich dann eine bestimmte funktion aufrufen

ich könnte es evtl. auch so machen das ich eine function aufrufe und dann an diese die gruppen_id übergebe und darin mit if abfragen arbeite

was wäre hier am besten und wie muss ich das übergeben?

Gruß Jürgen

[molily]

echo '<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.' onclick="function1();"></input>

>   
> kann ich dann IN der funktion mit  
> `document.getElementsByName('Wert_1')[0].value`{:.language-javascript}  
> auf den Wert zugreifen  
  
Im Prinzip ja… wenn die Funktion den Namen »Wert\_1« und die Nummer des Feldes irgendwie aus dem Kontext erschließen kann.  
  

> oder muss ich diesen via Variable übergeben?  
> also in der `onclick="function1($wert_1, $Wert_2 etc)`{:.language-javascript}  
  
Das wäre einfacher und expliziter.  
  
In HTML könnte letztlich stehen:  
  
`onclick="[code lang=javascript]funktion('123', '456', '789')`{:.language-javascript}"[/code]  
  
Das PHP musst du so schreiben, dass letztlich dieser HTML-/JS-Code heraus kommt.  
  

> wie kann ich das am besten machen da ich ja in der Zeile mit dem radio button und dem ` onclick="function_1()`{:.language-javascript} ja nur eine bestimmte funktion aufrufen kann  
  
Am besten schreibst du eine Funktion, die anhand von Parametern oder Kontext-Infos entscheidet, was zu tun ist.  
  

> ich habe also in der Tabelle mit den radio buttons auch eine wert aus einer db z.B. $row->Gruppen\_ID, diese enthält entweder 1, 2, 3 .... udn anhand dieser muss ich dann eine bestimmte funktion aufrufen  
  
Okay, dann musst du der Funktion diese Information übergeben oder sie aus dem DOM auslesen.  
  

> ich könnte es evtl. auch so machen das ich eine function aufrufe und dann an diese die gruppen\_id übergebe und darin mit if abfragen arbeite  
  
Ja, das wäre besser, siehe oben.  
  
Hast du schon einmal mit jQuery gearbeitet? Damit wäre es einfacher, das Event-Handler per JavaScript zu registrieren und sich darin durch das DOM zu hangeln, um die nötigen Daten für eine Zeile auszulesen.  
  
Grüße  
Mathias

-- 
[Chaplin.js - JavaScript application architecture on top of Backbone.js](http://chaplinjs.org/)

[javascriptnewbie]

Hast du schon einmal mit jQuery gearbeitet? Damit wäre es einfacher, das Event-Handler per JavaScript zu registrieren und sich darin durch das DOM zu hangeln, um die nötigen Daten für eine Zeile auszulesen.

Grüße
Mathias

Hallo
nein mit jQuery habe ich noch nicht gearbeitet.
kenne mich eigentlich nur ein wenig mit PHP und mysql aus und bei javascript komme ich schon total ins Schleudern.
zumindest brauch ich noch etwas um mich einzuarbeiten

Gruß Jürgen

gibts zu jquery eine gute deutsche Doku mit simplen Beispielen?

[javascriptnewbie]

Habe gerade im Netz gesehen das man ja wohl auch in einer javascript fuktion auf PHP zurückgreifen kann

dann sollte sich das Problem lösen lassen da ich dann alles aus der MYSQL-db mir in der javascript funktion holen kann

wenn die Deutschen in der zweiten Hälfte den Sack noch richtig zu machen dann gehts weiter :)

Tooooooor :)

[Der Martin]

Hallo Jürgen,

Hallo,
[...]
Mathias

bitte zitiere maßvoll und sinnvoll, vermeide TOFU. Danke.

ich rufe ja über den radio button eine javascript funktion auf

also
echo '<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.' onclick="function1();"></input>

Das heißt, du rufst derzeit die Funktion auf, übergibst ihr aber keine Parameter. Die einfachste und eleganteste Methode wäre IMO, den "magischen" Parameter "this" zu übergeben, der eine Referenz auf das Objekt darstellt, das den Eventhandler aufruft. So hast du über this.value, this,id, this.name und Konsorten direkten Zugriff auf alle Eigenschaften des betroffenen Elements.

Ich möchte zusätzlich noch anhand  eines Wertes eine bestimte funktion aufrufen

Und wo steht dieser Wert, bzw. wo kommt er her?

ich bekomme also im PHP code und in der Tabelle Zahlenwerte. also z.B. 1,2,3,4 oder 5
ich brauche oben jetzt 5 versch. funktionen
also
function_1()
function_2()

Nein. Wenn alle diese Funktionen im Prinzip den gleichen Job erledigen sollen, nimm eine einzige Funktion, die entweder anhand eines zusätzlichen Parameters oder anhand von "this" entscheidet, was genau zu tun ist.

Ciao,
 Martin

[javascriptnewbie]

Hallo Martin

ok versuche mich an die Zitierregeln zu halten!

Das heißt, du rufst derzeit die Funktion auf, übergibst ihr aber keine Parameter. Die einfachste und eleganteste Methode wäre IMO, den "magischen" Parameter "this" zu übergeben, der eine Referenz auf das Objekt darstellt, das den Eventhandler aufruft. So hast du über this.value, this,id, this.name und Konsorten direkten Zugriff auf alle Eigenschaften des betroffenen Elements.

Das war eigentlich auch was ich mich fragte wie das bei javascript funktioniert.
In PHP muss ich ja die Werte an die Funktion übergeben.

Die Funktion rufe ich ja am radio button auf (das ist kein Formular sondern nur eine Tabelle) und der radio Button soll nur bei onklick reagieren.

Und wo steht dieser Wert, bzw. wo kommt er her?

Die Werte stehen in hidden variablen (in  der Tabelle) die ich zuvor aus einer mysql-db holte.
Ich brauche nur 2-3 Werte mit denen ich dann in der javascript-funktion arbeiten kann.

Im Grunde habe ich folgendes vor.

Ich lasse mir auf der Webseite eine Tabelle ausgeben.
Das sind erstmal Basiseintragungen.
Wenn ich nun auf dne radio button klicke wird in der javascript funktion ein Formular gebildet und ausgegeben. Das Formular wird dann entsprechende Felder besitzen die sich anhand der Gruppen_ID zusammensetzen.

Nein. Wenn alle diese Funktionen im Prinzip den gleichen Job erledigen sollen, nimm eine einzige Funktion, die entweder anhand eines zusätzlichen Parameters oder anhand von "this" entscheidet, was genau zu tun ist.

so wie ich es verstanden habe wird es wohl am besten sein.
die Funktion so aufzurufen

<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.' onclick="function1($row->Zeilen_Id, $row->Gruppen_Id, etc-was-ich-sonst-noch-brauche);"></input>  

auf den value-wert könnte ich dann wohl auch verzichten

also in der form

<input type="radio" name="Zeilen_Id" onclick="function1($row->Zeilen_Id, $row->Gruppen_Id, etc-was-ich-sonst-noch-brauche);"></input>  

oder?

Gruß Jürgen

[javascriptnewbie]

Hallo,

an alle ein Dankeschön, alles funktioniert einwandfrei.

Jetzt habe ich noch ein kleines Problemchen.

durch die funktion die aufgerufen wird soll ein html-formular ausgegeben werden.
In dem Formular soll eine option-box ausgegeben werden.
Die Werte dieser Option-box bekomme ich jedoch aus einer Mysql-db.

Da ich ja das Formular auf Clientseite mit javascript aufgerufen wird, müsste ich zuvor schon die Werte irgendwie an javascript (also an die funktion) übergeben.

ich könnte zuvor irgendwie ein array mit den Werten in PHP füllen und das dann an die javascript-funktion übergeben.

Wie liest man in javascript ein array aus?

oder gibt es dazu eine elegantere Möglichkeit?

Gruß Jürgen

[misterunknown]

Moin,

Wie liest man in javascript ein array aus?

Es gibt die Möglichkeit mit json_encode zu arbeiten:

<?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); ?>  

<script type="text/javascript">  
var arr = <?php json_encode($meinArray); ?>;  
alert(arr.b);  
</script>

Grüße Marco

[hotti]

Moin,

In der javascript function benötige ich jedoch Werte aus der Tabelle (die in jeder Zeile den radio-buuton hat)
z.B. Zeilen_Id, Wert_1 etc.

Du könntest bereits beim Ausgeben der Tabelle die Werte über Platzhalter im Template als Argumente in die JS-Funktionen setzen.

H.

[Gunnar Bittersmann]

@@javascriptnewbie:

nuqneH

<input type="radio" name="Zeilen_Id" value='.$row->Zeilen_Id.'></input>
und/oder
<input type="hidden" name="Wert_1" value='.$row->Wert_1.'></input>

input ist ein leeres Element, das darf in HTML* keinen End-Tag </input> haben.

Entweder <input …> oder polyglott <input …/>.

Qapla'

* In XHTML schon (d.h. ausgeliefert als 'application/xhtml+xml' o.ä.). Sinnvoller wäre aber auch dann die polyglotte Schreibweise <input …/>.