nicht angemeldet
php-Variable mit javascript berechnen
Hallo Gemeinde,
ich habe das Folgende Problem...
Ich möchte mehrere Felder innerhalb eines Formulars nach der Eingabe addieren und in einem anderen Feld ausgeben. Wie das normalerweise funzt ist mir klar. Allerdings bringe ich das nicht auf die Reige wenn die Variablen innerhalb von php definiert sind... geht das überhaupt oder muss ich quasi einen Berechnungsbutton einfügen... dann brauch ich allerdings auch kein javascript mehr...
Der Code sieht folgendermassen aus...
js:
document.form.gesamt[1].value = parseFloat(document.form.feld[1].value) + parseFloat(document.form.sm[1].value);
usw...
Die Formularfelder so:
<?php
echo"<input type='text' name='feld[]' value='$feld' >";
das gleich gibt's auch für sm, das Feld gesamt soll hier aus feld und sm addiert werden...
Da die Felder in ihrer Anzahl differieren kann ich auch nicht von Anfang an die FeldNamen von 1 bis x durchnummerieren und die 'php' werden später gesamthaft und nicht einzeln eingetragen...
Danke für Eure Hilfe...
P.S.: Natürlich steht bei den Input-Feldern auch noch ein onChange...
Gruss
wuscheck
-
Hallo Wuschek,
langsam:
PHP läuft auf dem Server und erzeugt Quellcode (HTML, aber auch JS),
welcher dann an den Browser gesendet wird...
Also: du kannst den JS-Code dynamisch erzeugen und somit auch Variablen und Werte, welche der JS-Interpreter dann im Browser verarbeitet...PHP-variablen kannst du mit JS nicht verarbeiten...Bedenke: alles, was du serverseitig berechnest ist unabhängig vom Browser (JS aktiviert?)
Gruss Sven
-
Aloha!
Die Formularfelder so:
<?php
echo"<input type='text' name='feld[]' value='$feld' >";Hier ist dein Denkfehler. Du erzeugst in HTML ein Texteingabefeld. Diese Felder sind in Javascript mit
document.forms[index].elements[index].value
oder
document.forms['name'].elements['name'].value
oder schnell mit
document.formularname.feldname.value
anzusprechen.Was machst du hier: Du erzeugst solch ein Feld, welches einen etwas komischen Namen (wegen der '[]') hat, aber ansonsten vollkommen "normal" ist.
Der Zugriff auf dieses Feld erfolgt immer noch (und wegen der Klammern zwangweise) über Variante 1 oder 2. Variante 3 funktioniert nicht, da du die Klammern des Namens angeben musst, diese aber für Javascript besondere Bedeutung haben.
Testcode:
<html>
<head>
<title>PHP-Feldnamen-Test</title>
</head>
<body>
<form name="testform" action="egal.html">
<input type="text" name="phpname[]" value="Feldinhalt">
</form>
<a href="javascript:alert(document.testform.elements['phpname[]'].value">Value anzeigen</a>
</body>
</html>Klick auf den Link zeigt den Feldinhalt des Feldes an.
Definierst du mehrere Eingabefelder mit dem gleichen Namen, dann legt Javascript automatisch ein Array an, um auf jedes einzelne Feld zuzugreifen.
Testcode:
<html>
<head>
<title>PHP-Feldnamen-Test</title>
</head>
<body>
<form name="testform" action="egal.html">
<input type="text" name="phpname[]" value="Feldinhalt">
<input type="text" name="phpname[]" value="Feldinhalt2">
</form>
<a href="javascript:alert(document.testform.elements['phpname[]'][1].value">Value anzeigen</a>
</body>
</html>Der Link zeigt jetzt den Inhalt des _zweiten_ Feldes an (Index [1]). Beachte, dass der Feldname selbst eckige Klammern enthält, die aber _nicht_ für den Zugriff auf das JS-Array verwendet werden können.
Javascript kennt für die Anzahl der Elemente in einem Array die Eigenschaft length. Mit document.testform.elements['phpname[]'].length kriegst du raus, wieviele Felder existieren (wobei vollkommen egal ist, ob die von PHP erzeugt wurden, oder vom lieben Gott persönlich), und kannst Schleifen durchlaufen, um zu addieren.
Beachte: Wenn du Probleme in Javascript hast, haben diese absolut nichts mit PHP zu tun - nur mit dem von PHP generierten Code. Benutze die Quelltextanzeige des Browsers (und möglicherweise eine abgespeicherte, PHP-freie Seite), um das Javascript-Problem zu lösen. Ändere dann deinen PHP-Code so, dass eine fehlerfreie Seite erzeugt wird.
Wenn man diese Technik des Verknüpfens von Javascript und PHP gut beherrscht, kann man ziemlich coole Sachen machen, die Javascript allein niemals beherrschen würde. Dynamisch generierter Javascript-Code ist IMHO so ziemlich die interessanteste Sache für Benutzeroberflächen, die ich mir denken kann - aber aufgrund der unklaren Trennung der Codeanteile auch ziemlich verwirrend für Einsteiger.
- Sven Rautenberg
-
Hi Sven,
erstmal vielen Dank für Deine rasche Antwort...
Nach Deinem Beispiel-Code habe ich nun mein Coding abgeändert, damit ich wieder zu der gewünschten Form gelange, allerdings wirft mir der Browser das folgende aus:Fehler: 'document.testform.elements.gesamt[].0' ist Null oder kein Objekt
Mein Code sieht nun so aus:
<HTML>
<HEAD>
<script LANGUAGE="JavaScript">
function calc() {
document.testform.elements['gesamt[]'][0].value = parseFloat(document.testform.elements['feld[]'][0].value) + parseFloat(document.testform.elements['sm[]'][0].value);
document.testform.sumfeld.value = parseFloat(document.testform.elements['feld[]'][0].value);
document.testform.sumsm.value = parseFloat(document.testform.elements['sm[]'][0].value);
document.testform.sumgesamt.value = parseFloat(document.testform.sumfeld.value) + parseFloat(document.testform.sumsm.value);
}
</script>
</head>
<body>
<form name=testform>
<input type='text' name='feld[]' size='5' maxlength='2' value='0' onChange='calc()'>
<input type='text' name='sm[]' size='5' maxlength='2' value='0' onChange='calc()'>
<input type='text' name='gesamt[]' size='5' maxlength='2'>
<br>
<input type="text" name="sumfeld" size="5" maxlength="2">
<input type="text" name="sumsm" size="5" maxlength="2">
<input type="text" name="sumgesamt" size="5" maxlength="2">
</form>
</body>
</html>Wäre schön, wenn Du noch einmal drüber schauen könntest... Danke!
Gruss
wuscheck
-
Aloha!
erstmal vielen Dank für Deine rasche Antwort...
Nach Deinem Beispiel-Code habe ich nun mein Coding abgeändert, damit ich wieder zu der gewünschten Form gelange, allerdings wirft mir der Browser das folgende aus:Fehler: 'document.testform.elements.gesamt[].0' ist Null oder kein Objekt
Naja, wenn du nur ein Feld des gleichen Namens hast, wird kein Array angelegt, und der Zugriff muss über
document.testform.elements['gesamt[]'].value
erfolgen.Du kannst einfach feststellen, ob ein Feld ein Array ist: Wenn es _kein_ Array ist, gibt es die Eigenschaft
document.testform.elements['gesamt[]'].length nicht, bzw. diese ist "undefined". Darüber kannst du eine IF-Abfrage machen und jeweils entscheiden, ob du via Array oder direkt zugreifen musst.- Sven Rautenberg
-
-