javascript - How can I display (onload) an on/off button in html depending on a value in a mysql database? -

i want display onload (sort-of) toggle button depending on value inside table in mysql database (the table has 1 row) , when click it,i want change value in same table 0 1 or opposite. i've seen lot of answers on related questions non of them seem working me. needed. lot!

here php code:

 <?php  include 'db_ecoheating.php';  mysql_connect($dbhost,$dbuser,$dbpass)   or die ("unable connect database");    mysql_select_db($dbname)   or die ("unable select database");    $sql = "select coil1 coils "; $result = mysql_query($sql);  while($row = mysql_fetch_array($result)){     $coil1 = $row['coil1'];  } $arr = array(   'value1'=> $coil1, ); echo json_encode($arr);   ?> 

also function in js (inlcuding jquery):

function buttonfunctions(){     var x1=document.getelementbyid("coil1");     var value = $.ajax({         type: "get",         url: "coils.php",         data: query,         datatype: "json"          success: function(data){             console.log(data.value1);          }        });     if(value=='0') coil1.src = "button2.png";             else if(value=='1') coil1.src = "button1.png";     //coil1.src="button1.png";     } 

also image(working button):

<input type="image" onclick="savedata()" id="coil1"/> 

while idea of using js ok, plain php , html/css. suggest start using mysqli/pdo.

/*css */ .button0 {background-image: url("button1.png");} .button1 {background-image: url("button2.png");} 

then, show button, use following php code

 <?php  include 'db_ecoheating.php';  mysql_connect($dbhost,$dbuser,$dbpass) or die ("unable connect database");     mysql_select_db($dbname)  or die ("unable select database");     $sql = "select * coils";  $result = mysql_query($sql);   while($row = mysql_fetch_assoc($result)){  $value = $row['coil1']; ?>   <input class="button<?php echo $value; ?>" type="image" onclick="savedata()" id="coil1"/>  <?php } ?>