Trying to prepopulate the runtime hours input on a modal form from the latest value in the db using ajax on a bootstrap page. When I try to fill it in, I get the error: TypeError: ‘stepUp’ called on an object that does not implement interface HTMLInputElement.
the PHP code to generate json
<?php
include('db.php');
include('function.php');
//error_reporting(E_ALL);
//ini_set('display_errors', 1);
$compressor_hours = '';
//get the last read runtime hours of each compressor
$compressor_hours .= "SELECT MAX(r.id),
MAX(CASE c.compressor_name WHEN 'CM101' THEN c_r.runtime_hours END) AS runtime_hours1,
MAX(CASE c.compressor_name WHEN 'CM201' THEN c_r.runtime_hours END) AS runtime_hours2,
MAX(CASE c.compressor_name WHEN 'CM301' THEN c_r.runtime_hours END) AS runtime_hours3
FROM plant_readings r
LEFT JOIN compressor_readings c_r ON c_r.plant_readings_id = r.id
LEFT JOIN compressors c ON c_r.compressor_id = c.id;";
//return one row of plant_readings_id | runtime_hours1 | runtime_hours2 | runtime_hours3
$statement = $connection->prepare($compressor_hours);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["runtime_hours1"];
$sub_array[] = $row["runtime_hours2"];
$sub_array[] = $row["runtime_hours3"];
$data[] = $sub_array;
}
$output = array(
"data" => $data
);
echo json_encode($output);
?>
Then the modal JS
$(document).ready(function(){
$('#add_button').click(function(){
$('#plant_readings_form')[0].reset();
$('.modal-title').text("Add New Readings");
$('#action').val("Add");
$('#operation').val("Add");
$.ajax({
url:"fetch_prefill_data.php",
method:"POST",
data:{runtime_hours1: runtime_hours1,
runtime_hours2: runtime_hours2,
runtime_hours3: runtime_hours3},
dataType:"json",
success:function(data)
{
var runtime_hours1 = $('#runtime_hours1').val();
var runtime_hours2 = $('#runtime_hours2').val();
var runtime_hours3 = $('#runtime_hours3').val();
runtime_hours1.val()=data.runtime_hours1;
runtime_hours2.val()=data.runtime_hours2;
runtime_hours3.val()=data.runtime_hours3;
}
})
});
Any ideas what I’m doing wrong? The input field, whose name & id correspond does not get prefilled & throws the error.