cant get php mysql update from serializeArray

Question

I have a HTML page which displays temperature and two buttons one which updates mysql with the temperature setting and the other with on/off data (1=ON 0=OFF)

with out the on/off button all was working ok with the following code.

function myFunction() {
var button = document.getElementById("onOff").value;
if (button == 1)
    button = 0;
else
    button = 1;
// AJAX code to submit form.
$.ajax({
method: "POST",
url: "dataUpdate.php",
data: $('#form_id').serialize(),
cache: false,
success: function(responseText) {
console.log(responseText)
}
});
}

I have added the button in HTML

    <button class="demand" onclick="myFunction()" id="onOff" value="">On/Off</button>

I then changed the JavaScript to this

function myFunction() {
var button = document.getElementById("onOff").value;
if (button == 1)
    button = 0;
else
    button = 1;

// AJAX code to submit form.
var data = $('#form_id').serializeArray();
data.push({name: 'onOff', value: button});
$.ajax({
method: "POST",
url: "dataUpdate.php",
date: $.param(data),    
cache: false,
success: function(responseText) {
console.log(responseText)
}
});
}

but it is not updating the database now. It may be a problem with the php script so I have posted this below

<?php
$roomStat = ($_POST['thermostat']);
$onOff = ($_POST['onOff']);

if ($roomState == ''){$roomState = 1;}
try
{
    $pdo = new PDO('mysql:host=localhost; dbname=office', 'phpmyadmin', 
'Odiham');
}
catch (PDOException $e)
{
    echo 'Error: ' . $e->getMessage();
    exit();
}
$id = 1;

$sql = "UPDATE heating SET stateSetting = :roomStat, heatingState = :onOff WHERE id = :id";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':id', $id);
$stmt->bindParam(':roomStat', $roomStat);
$stmt->bindParam(':onOff', $onOff);
$stmt->execute();
// close connection_aborted
$conn = null;
?>

below is the full HTML page

<script>
var count =  1;
var gaugeData = function(){
     $.ajax({
        url:"data.php",
        dataType:"json",
        success: function(data){
            console.log(data);
            if (data.temp <= 15){
                document.getElementById("RoomTemp").style.color = '#00FFFF';
            }
            if (data.temp > 15 && data.temp < 21){
                document.getElementById("RoomTemp").style.color = '#FF9900';
            }
            if (data.temp >= 21){
                document.getElementById("RoomTemp").style.color = '#FF3300';
            }
            if (count == 1){
                count = 0;
                $('#thermostat').val(data.thermostat);
                sliderFunction();
            }
            $("#RoomTemp").html(data.temp + '&deg;C');
            var s = document.getElementById("onOff");
            s.value = data.state;
            }
    });
 }
function sliderFunction(){
    var currentValue = $('#currentValue');
    $('#thermostat').change(function(){
        currentValue.html(this.value);
    });
    $('#thermostat').change();
};

setInterval (gaugeData, 1000);
function myFunction() {
var button = document.getElementById("onOff").value;
if (button == 1)
    button = 0;
else
    button = 1;

// AJAX code to submit form.
var data = $('#form_id').serializeArray();
data.push({name: 'onOff', value: button});
$.ajax({
method: "POST",
url: "dataUpdate.php",
date: $.param(data),    
cache: false,
success: function(responseText) {
console.log(responseText)
}
});
}
</script>
</head>
<body onload="gaugeData()">

<div class="row">
<div class="col-12">
<div class="row">
        <div class="col-5">
        </div>
        <div class="col-2">
            <div class="header"><h1>Office Heating</h1></div>
        </div>
        <div class="col-5">
        </div>
</div>
</div>
<div class="row">
<div class="col-12">
    <div class="row">
        <div class="col-5">
        </div>
        <div class="col-2">
            <div class ="waterTile">
                <p class="GW"> Temperature</p>
                <div class="G" id="RoomTemp"></div>
                <form name="form" id="form_id">
                <div class="thermostatSlider"><input id="thermostat" name="thermostat" type="range" min="0" max="30" value="" class="slider" /></div>
                <div class="setid" id="setid">Set</div>
                <div class="SliderValue" id="currentValue"></div>
                <div class="item active">
                <button class="btn" onclick="myFunction()">Update</button>
                <button class="demand" onclick="myFunction()" id="onOff" value="">On/Off</button>
                </div>
                </form>
            </div>
        </div>
        <div class="col-5">
        </div>
    </div>
</div>
</div>
</body>
<script>
document.getElementById("thermostat").addEventListener("change", changeFunction);
function changeFunction() {
document.getElementById("currentValue").style.color = '#FF3300'
document.getElementById("setid").style.color = '#FF3300'
document.getElementById("RoomTemp").style.color = '#FF3300'
}
 </script>
 </html>

Answer 1

go it working with the help from Ghost answer to question on here ref 25516865

i changed the myfunction to the following and it all works

function myFunction() {
event.preventDefault();
var button = document.getElementById("onOff").value;
if (button == 1)
    id = 0;
else
    id = 1;
var params = $("#form_id").serializeArray();
params.push({name: 'onOff', value: id});

$.ajax({
    method: "POST",
    url: "dataUpdate.php",
    data: params,
    success: function(responseText) {
        console.log(responseText);
    }
});
}

cant get php mysql update from serializeArray

Question

1 answers

solution1
0 2018-01-19 16:15:59

cant get php mysql update from serializeArray

Question

1 answers

solution1 0 2018-01-19 16:15:59

solution1
0 2018-01-19 16:15:59