Inputfelder in Echtzeit berechnen

[Sandra]

Hallöchen, it´s me ;-)

ich steh´vor einem echten Problem und komme mangels Javascript-Kenntnisse nicht weiter...

Ich soll ein bestehendes PHP-Script so abändern dass in einer Tabelle der Mittelwert automatisch aktualisiert wird.

Funktion:
Es werden per FOR() Inputfelder (MySQL-Daten) in Tabellenform generiert.
in der letzten Spalte ein Inputfeld "Mittelwert"
Bei Änderung eines der Felder, oder beim Abschicken von <form> soll der Mittelwert neu berechtet werden.

  
  
<?php  
for ($x = 0, $m = count($columns); $x < $m; $x++) { ?>  
	<td>  
	<input  class="inputbox"  
		type="text" size="<?php echo $size; ?>"  
	        name="col<?php echo $columns[$x]->id . 'row' . $nedit ?>"  
		value="<?= str_replace('"', '&quot;', $value); ?>"  
		onkeydown="document.adminForm.col50row<?= $nedit ?>.value=1234>  
	</td>  

(Code gekürzt/vereinfacht)

nun bekomme ich den Test-Wert 1234 bei Änderung eines der Felder, leider habe ich echt keine Ahnung wie ich nun die dynamisch kreierten Felder (die auch in der Anzahl variieren können) anspreche, addiere und teile.

Schematisch/Mathematisch sollte es ja so funktionieren:
onkeydown="document.adminForm.col50row<?= $nedit ?>.value=(Feld1+Feld2...+Feld10)/Feldanzahl>

Bitte helft mir ein bisschen...

[EKKi]

Mahlzeit Sandra,

Bei Änderung eines der Felder, oder beim Abschicken von <form> soll der Mittelwert neu berechtet werden.

Ersteres ist ein rein Client-seitiges Problem - dazu wäre es gut, wenn Du einmal beispielhaften HTML-Code, so wie ihn der Browser "zu Gesicht" bekommt, zeigen könntest (von Deinen Lesern weiß nämlich *niemand*, was in Deinen ganzen PHP-Variablen enthalten ist). Dann kann man ausgehend davon eine Funktion entwickeln, die die gewünschten Berechnungen vornimmt.

MfG,
EKKi

[Sandra]

Hallo EKKi,

Da hast Du Recht ;-)

Das ganze ist eine Komponente zu Joomla, und generiert einfach Tables mit beliebigen View´s um Daten aus der DB herzuzeigen.

hab hier mal den Quellcode der Zeile (natürlich sind es mehrere Zeilen), auch das Gedöns drumrum hab ich mal weggelassen.
Der Name der Felder generiert sich aus der mySQL Spalte und der Ausgegebenen Reihe (COLxROWx)

  
<form>      // absenden entspricht Speicherung in mySQL  
<table>  
  
//HIER TABLE-HEAD usw.  
  
<tr class="row0">  
   <td>  
      <input    class="inputbox" type="text" size="5%"  
	        name="col48row1" value="Max Mustermann"  
	        onkeydown="document.adminForm.col50row1.value=MITTEL">  
   </td>  
   <td>  
      <input 	class="inputbox" type="text" size="5%"  
		name="col49row1" value="G2"  
                onkeydown="document.adminForm.col50row1.value=MITTEL">  
   </td>  
   <td>  
      <input 	class="inputbox" type="text" size="5%"  
		name="col75row1" value="BOL"  
		onkeydown="document.adminForm.col50row1.value=MITTEL">  
   </td>  
   <td>  
      <input 	class="inputbox" type="text" size="5%"  
	        name="col51row1" value="300"  
		onkeydown="document.adminForm.col50row1.value=MITTEL">  
   </td>  
   <td>  
      <input 	class="inputbox" type="text" size="5%"  
	        name="col51row1" value="200"  
		onkeydown="document.adminForm.col50row1.value=MITTEL">  
   </td>  
  
// HIER JE NACH ANZAHL DER SPALTEN NOCH MEHR <TD><INPUT></TD> ...  
  
  
   <td>  
      <input 	class="inputbox" type="text" size="5%"  
	        name="col51row1" value="500"  
		onkeydown="document.adminForm.col50row1.value=MITTEL">  
   </td>						  
   <td>  
      // HIER SOLL DER MITTELWERT REIN  
      <input 	class="inputbox" type="text" size="5%"  
		name="col50row1" value="355.42857142857">  
   </td>  
</tr>  
<tr>  
  
// HIER DANN ROW2 / ROW3 / usw. der Tabelle  
  
</Table>  
</form>  

Die Ausgabe dann etwa so:

TABLE-HEAD
Max Mustemann    G2   BOL   300   200   500  333,33
Ute Utenfrau     G1   KL    ...usw
...

und nun soll eben das letzte Feld je Reihe (col50row1) den aktuellen Mittelwert enthalten. Muss nicht mal in Echtzeit sein, einfach nur _VOR_ dem abschicken des <form>-tag´s.

Ich glaub´ es ist ganz einfach, ich kann´s nur nicht so richtig darstellen...

[Struppi]

Hast du mal in die Fehlerkosnole geschaut?

<input    class="inputbox" type="text" size="5%"
        name="col48row1" value="Max Mustermann"
        onkeydown="document.adminForm.col50row1.value=MITTEL">
   </td>

Denn diese Zeile, so wie sie hier steht müßte zwei Fehler anzeigen.

Struppi.

[EKKi]

Mahlzeit Sandra,

Der Name der Felder generiert sich aus der mySQL Spalte und der Ausgegebenen Reihe (COLxROWx)

[code lang=html]
<form>      // absenden entspricht Speicherung in mySQL
<table>

//HIER TABLE-HEAD usw.

<tr class="row0">
   <td>
      <input    class="inputbox" type="text" size="5%"
        name="col48row1" value="Max Mustermann"
        onkeydown="document.adminForm.col50row1.value=MITTEL">
   </td>

Du könntest z.B. <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onfocus@title=beim Fokussieren> des Textfelds, <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeyup@title=beim Loslassen einer Taste> bei fokussiertem Textfeld sowie <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onblur@title=beim Verlassen> des Textfeldes eine Funktion aufrufen und dieser erstmal <http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=das aktuelle Element> als Parameter übergeben.

Die Funktion müsste dann die Werte aller Eingabefelder der aktuellen Zeile ermitteln, den Mittelwert berechnen und in das Feld für den Mittelwert einfügen.

Problem 1: Wie ermittelt man alle Felder der aktuellen Zeile? Entweder, indem man sich <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=im DOM nach oben hangelt>, bis man auf Ebene der Tabellenzeile ist und dann dort alle enthaltenen Textfelder ausliest oder indem man feststellt, <http://de.selfhtml.org/javascript/objekte/regexp.htm@title=wie das aktuelle Textfeld heißt> und sich dann alle sucht, die so ähnlich heißen.

Problem 2: Woher weiß man, wie das Feld heißt, in das der Mittelwert eingetragen werden soll?

MfG,
EKKi

[Sandra]

Hallo EKKi,

danke für beine Bemühungen ;-)

»»Du könntest z.B. <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onfocus@title=beim Fokussieren> des Textfelds, <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeyup@title=beim Loslassen einer Taste> bei fokussiertem Textfeld sowie <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onblur@title=beim Verlassen> des Textfeldes eine Funktion aufrufen und dieser erstmal <http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=das aktuelle Element> als Parameter übergeben.

Das wäre wohl der Weg.

Die Funktion müsste dann die Werte aller Eingabefelder der aktuellen Zeile ermitteln, den Mittelwert berechnen und in das Feld für den Mittelwert einfügen.

Richtig.

Problem 1: Wie ermittelt man alle Felder der aktuellen Zeile? Entweder, indem man sich <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=im DOM nach oben hangelt>, bis man auf Ebene der Tabellenzeile ist und dann dort alle enthaltenen Textfelder ausliest oder indem man feststellt, <http://de.selfhtml.org/javascript/objekte/regexp.htm@title=wie das aktuelle Textfeld heißt> und sich dann alle sucht, die so ähnlich heißen.

kein Problem: Alle Felder haben im Namen die Reihe mit angegeben zB: blablarow1

Problem 2: Woher weiß man, wie das Feld heißt, in das der Mittelwert eingetragen werden soll?

kein Problem, diese steht und kann direkt mit dem Nahmen angesprochen werden.

MfG,
EKKi

[JürgenB]

Hallo Sandra,

ich habe da mal was für mich gebastelt. Vielleicht hilft es dir als Beispiel weiter.

http://www.j-berkemeier.de/test/Gasrechner.html

Gruß, Jürgen

[Sandra]

Hallo Jürgen,

Danke für Deinen Link, aber ich glaub´ ich kann mir da nicht so wirklich was ableiten draus... werd´s mir aber morgen mal genauer anschauen.

[JürgenB]

Hallo Sandra,

... aber ich glaub´ ich kann mir da nicht so wirklich was ableiten draus...

da wird nur nach Änderung (onchange) des Wertes von Inputfeldern deren Wert ausgelesen und verrechnet. Die Ergebnisse landen dann in einigen Tabellenfeldern.

Gruß, Jürgen

[Sandra]

da wird nur nach Änderung (onchange) des Wertes von Inputfeldern deren Wert ausgelesen und verrechnet. Die Ergebnisse landen dann in einigen Tabellenfeldern.

ja, so weit war ich schon. Das Problem ist jetzt aber mehr das, dass ich nicht weiß wie ich die dynamisch erzeugten Input-Felder aus PHP/HTML-Mischmasch in Javascript korrekt anspreche/auslese.

[JürgenB]

Hallo Sandra,

... Das Problem ist jetzt aber mehr das, dass ich nicht weiß wie ich die dynamisch erzeugten Input-Felder aus PHP/HTML-Mischmasch in Javascript korrekt anspreche/auslese.

entweder, wie in meinem Beispiel, über this im Eventhandler, oder du gibst ihnen eine eindeutige ID und nimmst document.getElemenById. document.getElementsByTagName wäre auch eine Möglichkeit. Die getElement-Methoden dürfen auch verschachtelt werden:

w = document.getElementById("eineID").getElementsByTagName("input")[4].value;

liefert den Wert des 5. Inputs in einem Element mit der ID "eineID".

Gruß, Jürgen