PHP/HTML-Schaltfläche Bildwechsel und Skriptaufruf

Question

Ich habe eine Seite mit Schaltflächen, auf die ein Benutzer klickt. Wenn die Schaltfläche geklickt wird, muss ich das Bild ändern und ein PHP-Skript aufrufen, um die Änderung zu speichern.

Ich kann irgendwie nicht den Knopf bekommen, um beides zu tun, es ändert das Bild, aber ruft den php nicht an.

Code:

<?php 
$db = new PDO('mysql:host=localhost;dbname=MySettings;charset=utf8mb4', 'TestUser', '1234567890'); 
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
try { 
    $mytable = $_SESSION["SESS_myuserid"]; 
    if($mytable == null) 
    {$url='login.php'; 
    echo '<META HTTP-EQUIV=REFRESH CONTENT="1; '.$url.'">';} 

    $stmt = $db->prepare("SELECT * FROM ".$mytable); 
    $stmt->execute(); 
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC); 

    $conn = null; 
    echo'<script>'; 
    $count = count($result); 
    for ($i = 0; $i < $count; $i++) { 
     $TheId = $result[$i]['Id']; 
     $TheFunction = $result[$i]['TheFunction']; 
     $TheSetting = $result[$i]['TheSetting']; 
     if ($TheSetting == "0"){ 
      echo 'var newsrc'.$TheId.' = "on.jpg";'; 
     } 
     else{ 
      echo 'var newsrc'.$TheId.' = "off.jpg";'; 
     } 

     echo 'function changeImage'.$TheId.'() {'; 
     echo 'if (newsrc'.$TheId.' == "off.jpg") {'; 
     echo "document.getElementById('pic".$TheId."').src = '/images/Boff.png';"; 

     echo "$('#newCode').load('Monitor.php?id=".$TheId."&Table=".$mytable."');"; 
     echo 'newsrc'.$TheId.' = "on.jpg";'; 
     echo '}'; 
     echo 'else {'; 
     echo "document.getElementById('pic".$TheId."').src = '/images/Bon.png';"; 

     echo "$('#newCode').load('Monitor.php?id=".$TheId."&Table=".$mytable."');"; 
     echo 'newsrc'.$TheId.' = "off.jpg";'; 
     echo '}'; 


     echo '}'; 
    } 
     echo'</script>'; 


    $myLeft=0; 
    $myTop=0; 
    $myRow=0; 

    for ($i = 0; $i < $count; $i++) { 
     $TheId = $result[$i]['Id']; 
     $TheFunction = $result[$i]['TheFunction']; 
     $TheSetting = $result[$i]['TheSetting']; 

     if ($TheSetting == "0"){ 
      $ThePic = "images/Boff.png"; 
     } 
     else{ 
      $ThePic = "images/Bon.png"; 
     } 
     echo '<div>'; 
     echo '<a href="#" onClick=changeImage'.$TheId.'()><img src="'.$ThePic.'" alt="" id="pic'.$TheId.'" style="position:absolute;left:'.$myLeft.'px;top:'.$myTop.'px;width:63px;height:30px;"> </a>'; 
     echo '</div>'; 
     $myTop=$myTop + 30; 
     $myRow=$myRow + 1; 
     if ($myRow == 12){ 
      $myRow=0; 
      $myTop=0; 
      if ($myLeft == 0){ 
       $myLeft = 292; 
      } 
      else { 
       $myLeft = 615; 
      } 
     } 
    } 
} 
catch(PDOException $e) { 
    $url='login.php'; 
    echo '<META HTTP-EQUIV=REFRESH CONTENT="1; '.$url.'">'; 
} 
?> 

Answer 1

Korrigiert: die Skriptfunktion geändert. Ein verstecktes div hinzugefügt, das aufgerufen wird, um den php zu laden, der nichts ausgibt, bleibt also unsichtbar.

echo'<script>'; 
    $count = count($result); 
    for ($i = 0; $i < $count; $i++) { 
     $TheId = $result[$i]['Id']; 
     $TheFunction = $result[$i]['TheFunction']; 
     $TheSetting = $result[$i]['TheSetting']; 
     if ($TheSetting == "0"){ 
      echo 'var newsrc'.$TheId.' = "on.jpg";'; 
     } 
     else{ 
      echo 'var newsrc'.$TheId.' = "off.jpg";'; 
     } 

     echo 'function changeImage'.$TheId.'() {'; 
     echo 'if (newsrc'.$TheId.' == "off.jpg") {'; 
     echo "document.getElementById('pic".$TheId."').src = '/images/Boff.png';"; 
     echo 'newsrc'.$TheId.' = "on.jpg";'; 
     echo '}'; 
     echo 'else {'; 
     echo "document.getElementById('pic".$TheId."').src = '/images/Bon.png';"; 
     echo 'newsrc'.$TheId.' = "off.jpg";'; 
     echo '}'; 
     echo' $("#HtmlConvo").load("Monitor.php?id='.$TheId.'&Table='.$mytable.'");'; 
     echo '}'; 
     } 
    echo'</script>';