Goal of Project: User enters in the serial number of a computer, the number is checked and if it matches a computer in our Airtable base, we add some information to it and create a new entry for it in a different tab.
My experience: I have lots of experience in Java, C, data structures and algorithms from University. Before starting this project, I had zero experience in web development and have thus far attained basic knowledge of html, php, css, and js.
What I need help with: My current mini goal for the project is to have the user enter a serial number and have the computer information displayed on the same page. I have my files shown below. My process.php accurately retrieves the computer information given a serial number and converts it to a JSON object. My my_script.js is what I used with my test.php to practice displaying the user input without redirection or page refresh. My myform.html I believe is pretty self explanatory, just a form to take in a serial number. I understand how my code in my_script.js works but need help adjusting it to handle JSON return. Any help, resources or overall ideas about the project will be greatly appreciated.
myform.html
<html>
<head>
<title>Computer swap form</title>
</head>
<body>
<form method = "post" action = "test.php" id="computerForm">
Serial Number: <br>
<input name="serialnumber" type="text">
<button id = "sub"> Submit </button>
</form>
<!--display the response returned after form submit -->
<span id ="result"></span>
<script type="text/javascript" src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="my_script.js" type="text/javascript"></script>
</body>
</html>
my_script.js
$("#computerForm").submit(function(e) {
e.preventDefault();
$.post(this.action, $(this).serialize(), function(info) {
$("#result").html(info);
});
});
process.php
<?php
include('./Airtable.php');
include('./Request.php');
include('./Response.php');
use \TANIOS\Airtable\Airtable;
$airtable = new Airtable(array(
'api_key' => '***',
'base' => '***'
));
//$sn = $_POST['serialnumber'];
$sn = "a_serial_number"; //manual setting this produces correct info
$params = [
"filterByFormula"=>"AND({S/N} = '$sn')"
];
$request = $airtable->getContent('Computers', $params);
$response = $request->getResponse();
$data = $response['records'];
echo json_encode($data);
?>
test.php
<?php
$sn = $_POST['serialnumber'];
if(!isset($sn))
{
echo "error serial number not set";
}
else {
echo "$sn successfully saved";
}
?>
