Firstly, I'm not much of a fan of coffee :p
I'll start with the PHP file since this has the simplest changes. We basically just add one variable for each field you want. I also am using a conditional statement when assigning the variables (so it checks to see if it is set and if so, uses the value). Then we just edit the SQL to insert each value to its proper field.
<?php
$con = mysqli_connect("***");
$download = (isset($_POST['download'])) ? $_POST['download'] : "";
$upload = (isset($_POST['upload'])) ? $_POST['upload'] : "";
$latency = (isset($_POST['latency'])) ? $_POST['latency'] : "";
$jitter = (isset($_POST['jitter'])) ? $_POST['jitter'] : "";
$testServer = (isset($_POST['testServer'])) ? $_POST['testServer'] : "";
$ip_address = (isset($_POST['ip_address'])) ? $_POST['ip_address'] : "";
$hostname = (isset($_POST['hostname'])) ? $_POST['hostname'] : "";
$query = "INSERT INTO data (download, upload, latency, jitter, testServer, ip_address, hostname) VALUES ('$download', '$upload', '$latency', '$jitter', '$testServer', '$ip_address', '$hostname')";
if(!mysqli_query($con,$query)) die('Error; ' . mysqli_error($con));
echo "bueno";
?>
Now for the page itself. There were a few changes I had to make, and I also removed the console logging lines because they shouldn't be needed anymore.
The biggest change I made was putting all of the testResult data in one ajax call. When you want to send multiple variables to a PHP script you just use '&' between each name/value pair. The next change was in how the testResult data gets passed to the ajaxrequest() function. Before I had changed things to pass testResult.download directly to the function. Instead, I'm not passing the entire testResult object so you can pull all of the values at once.
In the end the main part of the code looks like this:
<html>
<head>
<script src="http://speedof.me/api/api.js" type="text/javascript"></script>
</head>
<body>
<h2>Rental Xpress Internet Speed Test</h2>
<button id="btnStart" type="button" onClick="btnStartClick()">Start Test</button>
<div id="msg"></div>
<script type="text/javascript">
SomApi.account = "SOM5326f3c941ee5"; //your API Key here
SomApi.domainName = "rxserver.no-ip.biz"; //your domain or sub-domain here
SomApi.config.sustainTime = 4;
SomApi.onTestCompleted = onTestCompleted;
SomApi.onError = onError;
var msgDiv = document.getElementById("msg");
function btnStartClick() {
msgDiv.innerHTML = "<h3>Speed test in progress. Please wait...</h3>";
SomApi.startTest();
}
function onTestCompleted(testResult) {
msgDiv.innerHTML =
"<h3>"+
"Download: " +testResult.download +"Mbps <br/>"+
"Upload: " +testResult.upload +"Mbps <br/>"+
"Latency: " +testResult.latency +"ms <br/>"+
"Jitter: " +testResult.jitter +"ms <br/>"+
"Test Server: "+testResult.testServer +"<br/>"+
"IP: " +testResult.ip_address +"<br/>"+
"Hostname: " +testResult.hostname +"<br/>"+
"</h3>";
ajaxrequest('extract.php', 'context', testResult);
}
function onError(error) {
msgDiv.innerHTML = "Error "+ error.code + ": "+error.message;
}
function get_XmlHttp() {
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { // for Forefox, IE7+, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) { // for Internet Explorer 5 or 6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(php_file, tagID, testResult) {
// create pairs index=value with data that must be sent to server
var $testData = "download="+testResult.download+"upload="+testResult.upload+"&latency="+testResult.latency+"&jitter="+testResult.jitter+"&testServer="+testResult.testServer+"&ip_address="+testResult.ip_address+"&hostname="+testResult.hostname;
var request = get_XmlHttp();
request.open("POST", php_file, true); // set the request
// adds a header to tell the PHP script to recognize the data as is sent via POST
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send($testData); // calls the send() method with datas as parameter
// If the response is received completely, will be transferred to the HTML tag with tagID
request.onreadystatechange = function() {
if (request.readyState == 4) document.getElementById(tagID).innerHTML = request.responseText;
}
}
(function(){ setTimeout(btnStartClick, 1500); })();
</script>
<div id="msg"></div>
<div id="data">This string will be sent with Ajax to the server, via POST, and processed with PHP</div>
<div id="context">Here will be displayed the response from the php script.</div>
</body>
</html>