I am trying to get my form data sent to a php file that will input the parameters into my PostgreSQL database. Most of the form is being filled out by Javascript getting google map longitude and latitude, a simple ping result, etc. I am running into a problem where all the parameters filled out by the javascript are being sent blank and only those filled out by the actual user have values. I can't figure out what I am doing wrong. Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://bootswatch.com/3/paper/bootstrap.css">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 65%;
}
#info {
margin: 40px;
width: auto;
}
#diff {
margin: 40px;
width: auto;
}
#form {
margin: 40px;
width: auto;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div.invisidiv {
display: none;
}
</style>
</head>
<body>
<div class="header" align="center">
<h2>CSULA Wifi Outage Report</h2>
</div>
<div id="alert"></div>
<div id="map"></div>
<form class="form-horizontal" id="form" method="post">
<fieldset>
<legend>Wifi Report</legend>
<div class="form-group">
<label for="date" class="col-lg-2 control-label">Date</label>
<div class="col-lg-10">
<input class="form-control" id="date" placeholder="Date" type="text" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="user_header" class="col-lg-2 control-label">User Agent Header</label>
<div class="col-lg-10">
<input class="form-control" id="user_header" placeholder="User Agent Header" type="text"
disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="appVersion" class="col-lg-2 control-label">App Version</label>
<div class="col-lg-10">
<input class="form-control" id="appVersion" placeholder="App Version" type="text" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="IP" class="col-lg-2 control-label">IP</label>
<div class="col-lg-10">
<p class="form-control" id="ip" placeholder="loading" type="text"></p>
</div>
</div>
<div class="invisidiv">
<label for="download" class="col-lg-2 control-label">Download</label>
<div class="col-lg-10">
<p class="form-control" id="download" placeholder="loading" type="text"></p>
</div>
</div>
<div class="invisidiv">
<label for="upload" class="col-lg-2 control-label">Upload</label>
<div class="col-lg-10">
<p class="form-control" id="upload" placeholder="loading" type="text"></p>
</div>
</div>
<div class="form-group">
<label for="ping" class="col-lg-2 control-label">Ping</label>
<p class="form-control" id="ping" type="text">Loading</p>
</div>
<div class="form-group">
<label for="lat" class="col-lg-2 control-label">Latitude</label>
<div class="col-lg-10">
<input class="form-control" id="lat" placeholder="Latitude" type="text">
</div>
</div>
<div class="form-group">
<label for="lat" class="col-lg-2 control-label">Longitude</label>
<div class="col-lg-10">
<input class="form-control" id="long" placeholder="Longtitude" type="text">
</div>
</div>
<div class="form-group">
<label for="location" class="col-lg-2 control-label">Location</label>
<div class="col-lg-10">
<input class="form-control" id="location"
placeholder="We can auto generate later on by using our postgresql bound box coordinate range"
type="text">
</div>
</div>
<div class="form-group">
<label for="selectfloor" class="col-lg-2 control-label">Select Floor</label>
<div class="col-lg-10">
<select class="form-control" id="selectfloor">
<option value="1">1*</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="wifistr" class="col-lg-2 control-label">Your wifi strength (0-5)</label>
<div class="col-lg-10">
<select class="form-control" id="wifistr">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="moreinfo" class="col-lg-2 control-label">Briefly describe your wifi issue</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="moreinfo"></textarea>
<span class="help-block">Test</span>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
<script id="autofill">
var info = document.getElementById('info');
var user_header = document.getElementById('user_header');
var appVersion = document.getElementById('appVersion');
var inputdate = document.getElementById('date')
inputdate.value = Date();
user_header.value = navigator.userAgent;
appVersion.value = navigator.appVersion;
</script>
<script id="getmap">
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 20,
mapTypeId: 'satellite'
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
// CSULA Data Science Class Building: -118.1697192639,34.0645025281,-118.1693410724,34.0646465133
if (position.coords.latitude >= 34.0645025281 && position.coords.latitude <= 34.0646465133
&& position.coords.longitude >= -118.1697192639 && position.coords.longitude <= -118.1693410724) {
// Set content
infoWindow.setContent('Location found.<br>' + 'Lat: ' + position.coords.latitude + '<br> Long: ' + position.coords.longitude);
// Get id's 'info' and 'alert
var status = document.getElementById('alert');
var lat = document.getElementById('lat');
var long = document.getElementById('long');
var loc = document.getElementById('location');
// Set style
status.setAttribute("class", "alert alert-dismissible alert-success");
lat.setAttribute("disabled", "disabled");
long.setAttribute("disabled", "disabled");
loc.setAttribute("disabled", "disabled");
// Set 'info''s innerHTML with the coords
status.innerHTML = '<button type="button" class="close" data-dismiss="alert">×</button> <strong>Success! Building location found.'
lat.value = position.coords.latitude;
long.value = position.coords.longitude;
loc.value = 'Data Science Building';
// ET Building: -118.1669058278,34.0659972855,-118.1655136272,34.0668892717
} else if (position.coords.latitude >= 34.0659972855 && position.coords.latitude <= 34.0668892717
&& position.coords.longitude >= -118.1669058278 && position.coords.longitude <= -118.1655136272) {
// Set content
infoWindow.setContent('Location found.<br>' + 'Lat: ' + position.coords.latitude + '<br> Long: ' + position.coords.longitude);
// Get id's 'info' and 'alert
var status = document.getElementById('alert');
var lat = document.getElementById('lat');
var long = document.getElementById('long');
var loc = document.getElementById('location');
// Set style
status.setAttribute("class", "alert alert-dismissible alert-success");
lat.setAttribute("disabled", "disabled");
long.setAttribute("disabled", "disabled");
loc.setAttribute("disabled", "disabled");
// Set 'info''s innerHTML with the coords
status.innerHTML = '<button type="button" class="close" data-dismiss="alert">×</button> <strong>Success! Building location found.'
lat.value = position.coords.latitude;
long.value = position.coords.longitude;
loc.value = 'ET Building';
} else {
// Set content
infoWindow.setContent('Location found.<br>' + 'Lat: ' + position.coords.latitude + '<br> Long: ' + position.coords.longitude);
// Get id 'alert'. Set the style and innerHTML
var status = document.getElementById('alert');
var lat = document.getElementById('lat');
var long = document.getElementById('long');
var loc = document.getElementById('location');
status.setAttribute("class", "alert alert-dismissible alert-danger")
lat.setAttribute("disabled", "disabled");
long.setAttribute("disabled", "disabled");
loc.setAttribute("disabled", "disabled");
status.innerHTML = '<button type="button" class="close" data-dismiss="alert">×</button> <strong>Unable to locate building.'
lat.value = position.coords.latitude;
long.value = position.coords.longitude;
loc.value = 'Unknown Location';
}
infoWindow.open(map);
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_DELETED_FOR_HELP&callback=initMap">
</script>
<script type="text/javascript">
var w = new Worker('speedtest_worker.min.js') // create new worker
setInterval(function () {
w.postMessage('status')
}, 100); // ask for status every 100ms
w.onmessage = function (event) { // when status is received, split the string and put the values in the appropriate fields
var data = event.data.split(';') // string format: status;download;upload;ping (speeds are in mbit/s) (status: 0=not started, 1=downloading, 2=uploading, 3=ping, 4=done, 5=aborted)
document.getElementById('download').textContent = data[1] + ' Mbit/s'
document.getElementById('upload').textContent = data[2] + ' Mbit/s'
document.getElementById('ping').textContent = data[3] + ' ms'
document.getElementById('ip').textContent = data[4]
console.log(data[4])
};
w.postMessage('start') // start the speedtest (default params. keep garbage.php and empty.dat in the same directory as the js file)
</script>
