PHP to read DB value, JS to increment it, AJAX to

Question

I am making a temperature target page where the form will read the current target, allow the user to +/- by 0.5 using Javascript buttons and then 'set' the target which takes the new value and saves it back to the database.

I have a working page which can read the DB value and set it, but then automatically reverts to '0.0' as the target. If the page is refreshed then it will display the target, but sometimes saves it at 0.0 in the DB.

I'm very confused as to why as I've spent far too long on this, but its bugging me! Any help is much appreciated, thanks.

Here is my code:

<?php 
    $conn = connect DB stuff here...
    $queryTarget = "SELECT * FROM target;";
    $result2 = $conn->query($queryTarget);
    $conn->close();
        if ($result2->num_rows > 0) {
            while($row = $result2->fetch_assoc()) {
        $target = $row['target'];
      }
    }
?>

<form id="input" method="post" action="">
    Temp <input type="text"  value="<?php echo $target; ?>" name="temp" id="temp"  >
    <input type="button"  id="Up"    value="up" / >
    <input type="button"  id="Down"  value="down"/ >
    <input type="submit" id="submit" value="submit " name="submit">
</form>

<?php
    $conn = connect DB stuff here...
    $temp = $_POST['temp'];
    $updateTarget = "UPDATE target SET target = '";
    $updateTarget = $updateTarget . $temp . "' WHERE id = 1;";

    $result = $conn->query($updateTarget);
    $conn->close();
?>

<script>
    var min = 15,
    max = 25;

    $("#Up").click(function(){
        if($("#temp").val() < 25 && $("#temp").val() >= 15)
            $("#temp").val(Number($("#temp").val()) + 0.5);
    });

    $("#Down").click(function(){
        if($("#temp").val() <= 25 && $("#temp").val() > 15)
            $("#temp").val(Number($("#temp").val()) - 0.5);
    });
</script>
<script>
    $(document).ready(function(){
        $('#submit').click(function(){
            var srt = $("#input").serialize();
            // alert is working perfect
            alert(srt);
            $.ajax({
                type: 'POST',
                url: 'form.php',
                data: srt,
                success: function(d) {
                    $("#input").html(d);
                }
                 return false;
        });
     });
    });

 </script>

Answer 1

just echo this temp value

<?php
//$conn = connect DB stuff here...
 $temp = $_POST['temp'];
 or 
 print_r($_POST);
 echo $temp;
 die();
 $updateTarget = "UPDATE target SET target = '";
 $updateTarget = $updateTarget . $temp . "' WHERE id = 1;";

then check alert if alert show right data then then use single query like this

 $updateTarget = "UPDATE target SET target = '$temp' WHERE id = 1";
 //i think it will help you to find issue
 $result = $conn->query($updateTarget);
 $conn->close();

 ?>

and your javascript function need to update

<script>
 $(document).ready(function(){
$('#submit').click(function(){
  var srt = $("#input").serialize();
        // alert is working perfect
        alert(srt);
        $.ajax({
          type: 'POST',
          url: 'form.php',
          data: srt,
          success: function(d) {
            alert(d);
            $("#input").html(d);
          }

        });
        return false;
      });
     });

  </script>

if you find right data then check your db structure that is it allow float etc. i think it will work
you can also check this

How to Search value from input by mysqli in database