Larikon: Problem mit Javascript/PHP

Aloha.

ich bin gerade an einem Projekt dran ein Kassensystem zu programieren und scheitere gerade dran.
Ich lade Produkte aus der Mysql-Datenbank. Dies funktioniert soweit.

  
<?php  
 echo "<html>";  
 echo "	<head>";  
//---------------------OPEN DATABASE---------------------//  
$verbindung = mysql_connect ("localhost", "kassen", "kassen", "kassen")  
or die ("keine Verbindung möglich.  
 Benutzername oder Passwort sind falsch");  
mysql_select_db("kassen")  
or die ("Die Datenbank existiert nicht.");  
$abfrage = "SELECT  
T1.prod_name,  
T2.preis  
  
  
FROM  
produkte T1,  
preise T2  
  
WHERE  
T1.prod_id2 = T2.prod_id  
";  
$ergebnis = mysql_query($abfrage) or die ("MySQL-Fehler: " . mysql_error());  

ich definier dann eine Standartumgebung für die Kassentabelle

  
echo "  
<div style=\"width:100%;height:100.1%; margin-top:0px; margin-left:0px;\">  
	<div style=\"width:100%;height:50%;\">  
	<table width=\"100%\"style=\"margin-left:0px;\">  
			<tr>  
			<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:10px;\">  
					<font color=\"#ffffff\">Pos</font>  
				</td>  
				<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:20%;\">  
					<font color=\"#ffffff\">Artikel</font>  
				</td>  
				<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:70%;\" id=\"td2\">  
					<font color=\"#ffffff\">Preis</font>  
				</td>  
			</tr>  
			<tr>  
		  
			</tr>  
		</table>  
		<table width=\"100%\"style=\"margin-left:0px;\" id=\"myTable\">  
			<tr>  
			<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:10px;\">  
  
				</td>  
				<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:20%;\">  
  
				</td>  
				<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:70%;\">  
				</td>  
			</tr>  
			<tr>  
		  
			</tr>  
		</table>  
	</div>  
	<div style=\"width:100.1%;height:50%;\">  

Jetzt kommt das Script per Javascript für die Tabellenerstellung

  
<script>  
		  
    function displayResult()  
    {  
    var table=document.getElementById(\"myTable\");  
    var row=table.insertRow(1);  
	var cell1=row.insertCell(0);  
    var cell2=row.insertCell(1);  
    var cell3=row.insertCell(2);  
	var prod_imp=document.getElementById(\"prod\").value;  
	var preis_imp=document.getElementById(\"prod\").name;  
	cell1.innerHTML= \"test\";  
	cell2.innerHTML=prod_imp;  
	cell3.innerHTML=preis_imp;  
    }  
    </script>  

funktioniert auch soweit.
jetzt erstelle ich Buttons aus der Dater der Datenbank.
Funktioniert auch soweit.

while($row = mysql_fetch_object($ergebnis))  
		{  
  
		echo "  
		<input type=\"button\" class=\"btn\" id=\"prod\" value=\"" . $row->prod_name . "\" name=\"" . $row->preis . "\" onclick=\"displayResult(this)\">";  
		};  

PROBLEM???
Er fügt mir immer die Daten des ersten Buttons in die Tabellenzellen ein.
Why???

Danke und Gruß

  1. Tach!

    Er fügt mir immer die Daten des ersten Buttons in die Tabellenzellen ein.

    Wer ist "er"? Und was ergab das Debugging? In welcher Variable steht ein anderer Wert und welches Funktionsergebnis liefert einen anderen Wert, als du erwartet hast?

    dedlfix.

    1. Wer ist "er"?

      Wenn ich auf den Button Klicken.
      Und was ergab das Debugging?
      der erstellt mir alles ohne probleme

        
      <input type="button" class="btn" id="prod" value="Wasser Still" name="2,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wasser mit Kohlenseure" name="2,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Cola" name="3,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Miranda" name="3,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="7UP" name="3,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Apfelsaft" name="3,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Orangensaft" name="3,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Bitter Lemon" name="3,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Tequila" name="3,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Erdbeer Limes" name="3,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Ramazzotti" name="3,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jegermeister" name="3,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Chivas Regal" name="4,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jack Daniels" name="4,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka" name="4,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Bier" name="4,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Weiswein" name="4,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Rotwein" name="4,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Prosecco" name="4,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Energy" name="4,50" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-Cola" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-Miranda" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-7UP" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-Apfel" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-Orange" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-Bitter" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Wodka-Energy" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-Cola" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-Miranda" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-7UP" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-Apfel" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-Orange" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-Bitter" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="Jacky-Energy" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Wasser Still" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Wasser mit Kohlenseure" name="6,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Cola" name="10,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Miranda" name="10,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL 7UP" name="10,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Apfelsaft" name="10,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Orangensaft" name="10,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Bitter Lemon" name="10,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Jegermeister" name="59,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Chivas Regal" name="89,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Jack Daniels" name="79,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Wodka" name="69,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Weiswein" name="19,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Rotwein" name="19,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Prosecco" name="29,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Veuve" name="99,00" onclick="displayResult(this)">  
      		<input type="button" class="btn" id="prod" value="FL Moet" name="99,00" onclick="displayResult(this)">  
      
      

      In welcher Variable steht ein anderer Wert und welches Funktionsergebnis liefert einen anderen Wert, als du erwartet hast?
      Wenn ich auf ein Button (z.B.:FL Wodka) klicke, dann zeigt er mir trotzdem die Werte (value / name) aus dem ersten Button (Wasser Still | 2,50) an.

      dedlfix.

      1. Tach!

        Wenn ich auf ein Button (z.B.:FL Wodka) klicke, dann zeigt er mir trotzdem die Werte (value / name) aus dem ersten Button (Wasser Still | 2,50) an.

        Wenn alles dieselbe ID hat, musst du dich nicht wundern, dass er da nur die erste Fundstelle nimmt.

        dedlfix.

        1. Wenn alles dieselbe ID hat, musst du dich nicht wundern, dass er da nur die erste Fundstelle nimmt.

          ja aber wie bekomme ich das hin, dass der die werte aus dem Input ausließt wenn es über die ID nicht geht. Ich hab mir das vorgestellt, dass er überprüft auf welchen button ich klicke, er dann nach dieser ID=prod die Werte auf den GEKLICKTEN Button ausließt.

          Hast du vielleicht ein Tipp?

          1. Tach!

            Wenn alles dieselbe ID hat, musst du dich nicht wundern, dass er da nur die erste Fundstelle nimmt.

            ja aber wie bekomme ich das hin, dass der die werte aus dem Input ausließt wenn es über die ID nicht geht. Ich hab mir das vorgestellt, dass er überprüft auf welchen button ich klicke, er dann nach dieser ID=prod die Werte auf den GEKLICKTEN Button ausließt.

            Geh mal in die Fußgängerzone und ruf laut "Andreas". Wieviele werden sich umdrehen? Nicht nur einer. IDs dienen zum Identifizieren. Wenn du einen Wert mehfach als ID vergibst, taugt das nicht mehr zum Identifizieren. Eine ID darf nur ein einmaliger Wert sein.

            Du übergibst doch this an die Funktion. Warum wertest du das in ihr nicht aus? Das ist doch schon die Referenz auf den geklickten Button. Es gibt keinen Grund noch einmal auf die Suche zu gehen. Aöternativ gibst du jedem Buton einen separaten Namen und suchst nach diesem. Den musst du dann auch als Parameter übergeben, kommst also nicht besser als gleich this zu verwenden.

            dedlfix.

            1. Ich habs nicht so richtig kapiert.
              Habs mal so probiert

                
              	while($row = mysql_fetch_object($ergebnis))  
              		{  
              		echo "  
              <input type=\"button\" class=\"btn\" id=\"" . $row->prod_name . "\" value=\"" . $row->prod_name . "\" name=\"" . $row->preis . "\" onclick=\"displayResult(this)\">";  
              		};  
                
              echo "  
              	<script>  
              	  
              		  
                  function displayResult()  
                  {  
                  var table=document.getElementById(\"myTable\");  
                  var row=table.insertRow(1);  
              	var cell1=row.insertCell(0);  
                  var cell2=row.insertCell(1);  
                  var cell3=row.insertCell(2);  
              	var prod_imp=document.getElementById(\"" . $row->prod_name . "\").value;  
              	var preis_imp=document.getElementById(\"" . $row->preis . "\").name;  
              	cell1.innerHTML= \"test\";  
              	cell2.innerHTML=prod_imp;  
              	cell3.innerHTML=preis_imp;  
                  }  
                  </script>";  
              	  
                
                
              		  
              
              

              dann bekomm ich beim debuggen
              "
              [15:01:41.812] TypeError: document.getElementById(...) is null @ http://localhost/raw.php:160 Tach!
              "

              Wenn alles dieselbe ID hat, musst du dich nicht wundern, dass er da nur die erste Fundstelle nimmt.

              ja aber wie bekomme ich das hin, dass der die werte aus dem Input ausließt wenn es über die ID nicht geht. Ich hab mir das vorgestellt, dass er überprüft auf welchen button ich klicke, er dann nach dieser ID=prod die Werte auf den GEKLICKTEN Button ausließt.

              Geh mal in die Fußgängerzone und ruf laut "Andreas". Wieviele werden sich umdrehen? Nicht nur einer. IDs dienen zum Identifizieren. Wenn du einen Wert mehfach als ID vergibst, taugt das nicht mehr zum Identifizieren. Eine ID darf nur ein einmaliger Wert sein.

              Du übergibst doch this an die Funktion. Warum wertest du das in ihr nicht aus? Das ist doch schon die Referenz auf den geklickten Button. Es gibt keinen Grund noch einmal auf die Suche zu gehen. Aöternativ gibst du jedem Buton einen separaten Namen und suchst nach diesem. Den musst du dann auch als Parameter übergeben, kommst also nicht besser als gleich this zu verwenden.

              dedlfix.

              1. Tach!

                Ich habs nicht so richtig kapiert.

                Du klickst auf einen Button, dann wird dessen onclick-Eventhandler aufgerufen und in this steht nun eine Referenz auf ebendiesen Button. Die übergibst du ja schon an die Funktion displayResult(). Diese aber nimmt ihn nicht entgegen, weil kein Argument in ihrem Funktionskopf notiert ist. So funktioniert das:

                function displayResult(der_geklickte_button) {
                  alert(der_geklickte_button.value);
                }

                Dein gezeigter Versuch kann nicht funktionieren. PHP kann dir nur den Seitenquelltext zusammenbauen, so wie er an den Client geliefert wird. Alles was nun im Browser passiert, wie das Anklicken des Buttons, geschieht außerhalb der Kontrolle PHPs. Du kannst also nicht mit PHP einen Wert in die Funktion schreiben, der variabel sein soll, je nach geklicktem Button. Das muss alles rein unter Javascript ablaufen. Die Funktion kann nur dann unterschiedlich reagieren (unterschiedliche Werte verarbeiten), wenn sie unterschiedliche Parameter übergeben bekommt. Ansonsten ist ihr Verhalten auf genau einen Wert festgelegt.

                dedlfix.

                1. Aloha

                  Hey das ist schonmal ein Fortschritt. :D Danke

                  Die Frage ist nur, was anstatt dem alert?

                  Sry bin nicht so helle in JS.

                  1. Ich habs mit dem versucht.

                      
                    var prod_imp=document.write(der_geklickte_button.value);  
                    var preis_imp=document.write(der_geklickte_button.name);  
                    cell1.innerHTML= "test";  
                    cell2.innerHTML= prod_imp;  
                    cell3.innerHTML= preis_imp;  
                    
                    

                    Der öffnet mir weiter immer wieder eine neue Seite.

                    1. Tach!

                      var prod_imp=document.write(der_geklickte_button.value);
                      var preis_imp=document.write(der_geklickte_button.name);
                      Der öffnet mir weiter immer wieder eine neue Seite.

                      Ja, das Dokument wurde beim ersten Laden gelesen und irgendwann kommt onload. Wenn du danach noch document.write() machst, wird ein neues dokument/fenster erzeugt. Du kommst nicht drumherum, Javascript-Grundlagen zu lernen. Es ist nicht sonderlich schön, bei jedem Problem Grundlagenwissen vermitteln zu müssen.

                      dedlfix.

                      1. Ist natürlich verständlich.
                        Trotzdem Danke für alles.

  2. Om nah hoo pez nyeetz, Larikon!

    ich definier dann eine Standartumgebung für die Kassentabelle

    echo "
    <div style="width:100%;height:100.1%; margin-top:0px; margin-left:0px;">
    <div style="width:100%;height:50%;">
    <table width="100%"style="margin-left:0px;">
    <tr>
    <td bgcolor="#333333" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:10px;">
    <font color="#ffffff">Pos</font>
    </td>
    <td bgcolor="#333333" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:20%;">
    <font color="#ffffff">Artikel</font>
    </td>
    <td bgcolor="#333333" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:70%;" id="td2">
    <font color="#ffffff">Preis</font>
    </td>
    </tr>
    <tr>

      	</tr>  
      </table>  
      <table width=\"100%\"style=\"margin-left:0px;\" id=\"myTable\">  
      	<tr>  
      	<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:10px;\">  
    
      		</td>  
      		<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:20%;\">  
    
      		</td>  
      		<td bgcolor=\"#333333\" style=\"border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#aaaaaa;width:70%;\">  
      		</td>  
      	</tr>  
      	<tr>  
        
      	</tr>  
      </table>  
    

    </div>
    <div style="width:100.1%;height:50%;">

      
      
    Einige Anmerkungen wichtiger und unwichtigerer Natur.  
      
    #1# Standard wird mit d geschrieben.  
      
    #2# Warum die div-Elemente außenrum? Sie sind überflüssig. Es ist auch nur eine Tabelle.  
      
    #3# Verwende keine inline-style-Angaben. Stecke die Formatierung in eine eigene CSS-Ressource. Zähl mal, wie oft du da dasselbe schreibst. siehe <http://wiki.selfhtml.org/wiki/CSS/Einbindung#Stylesheets_in_HTML_einbinden>  
      
    #4# Du verwendest veraltete Elemente und Attribute siehe <http://wiki.selfhtml.org/wiki/HTML/deprecated>  
      
    #5# HTML-Code per echo auszugeben ist keine gute Idee. Man kommt schnell durcheinander und muss außerdem noch darauf achten, wie sich die Variablen verhalten, ob sie nun innerhalb einfacher oder doppelter Anführungszeichen stehen. Es kommt ja nicht einmal PHP in der Tabelle vor.  
      
    Es sollte darum so aussehen. Achte darauf, ein valides Dokument zu erstellen.  
      
    ~~~html
    <?php //alles, was so gemacht werden muss ?>  
    <table>  
      <thead>  
        <tr>  
          <th>Pos</th>  
          <th>Artikel</th>  
          <th>Preis</th>  
        </tr>  
      <tbody>  
        <tr>  
          <td></td>  
          <td></td>  
          <td></td>  
          <td></td>  
        </tr>  
      </tbody>  
    </table>
    

    Außerdem solltest du die DB-Resultate per PHP in die Tabelle schreiben.
    <td><?=$ergebnis['preis']?></td>

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Imme und Immergrün.

    1. Sry war ein Flüchtigkeitsfehler.

      Ich das script mal schöner gemacht.

        
      <html>  
      <head>  
      <?php  
      include ("db.php");  
      ?>  
      <link rel="stylesheet" type="text/css" href="style.css">  
      <script language="javascript" type="text/javascript" src="cell.js"></script>  
      </head>  
        
      <body>  
        
      <div style="width:100%;height:50%;">  
      	<?php  
      		include ("btn.php");  
      	?>  
      </div>  
      <div style="width:100%;height:50%;">  
      	<table id="myTable">  
      		<thead>  
      			<tr>  
      				<th class="1">Pos</th>  
      				<th class="2">Artikel</th>  
      				<th class="3">Preis</th>  
      			</tr>  
      			<tr>  
      		  
      			</tr>  
      		<tbody>  
      			<tr>  
      				<td></td>  
      				<td></td>  
      				<td></td>  
      			</tr>  
      		</tbody>  
      	</table>  
      </div>  
        
      </body>  
      </html>	  
      
      

      so in Ordnung jetzt?

      warum soll ich die DB-Resultate in die Tabelle scheiben wollen?

      <td><?=$ergebnis['preis']?></td>

      Ich will wenn man auf den Button klickt, der wunderbar aus der DB erzeugt wird, die Werte des Buttons in die Tabelle scheiben. Oder geht das anders?

      Danke

      1.   
         				<th class="1">Pos</th>  
         				<th class="2">Artikel</th>  
         				<th class="3">Preis</th>  
        
        

        so in Ordnung jetzt?

        Nein. Eine Klasse darf nicht mit einer Zahl beginnen und auch dadurch nicht nur aus einer zahl bestehen.

        1. <th class="wd01">Pos</th>  
          <th class="wd02">Artikel</th>  
          <th class="wd03">Preis</th>
          

          sooo.. (schäm)

            		<th class="1">Pos</th>  
            		<th class="2">Artikel</th>  
            		<th class="3">Preis</th>  
          
          
          > > so in Ordnung jetzt?  
          >   
          > Nein. Eine Klasse darf nicht mit einer Zahl beginnen und auch dadurch nicht nur aus einer zahl bestehen.
          
      2. Om nah hoo pez nyeetz, Larikon!

        <div style="width:100%;height:50%;">
        <?php
        include ("btn.php");
        ?>
        </div>
        <div style="width:100%;height:50%;">

          		<th class="1">Pos</th>  
          		<th class="2">Artikel</th>  
          		<th class="3">Preis</th>  
        

        Immer noch überflüssige div-Elemente mit inline-styles, die Klassen brauchst du auch nicht.

        Ich will wenn man auf den Button klickt, der wunderbar aus der DB erzeugt wird, die Werte des Buttons in die Tabelle scheiben. Oder geht das anders?

        Du holst dir Daten aus der Datenbank um sie nach einem Klick einzufügen? Wenn die Daten sowieso alle da sind, warum dann noch der Klick?

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Frank und Frankfurt.