<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form id="frm1">
<table class="table">
<thead>
<tr>
<td>PublicKey:</td>
<td>PrivateKey:</td>
<td>latitude:</td>
<td>longitude:</td>
<td>altitude:</td>
<td>heading:</td>
<td>speed:</td>
<td>external_temp:</td>
<td>internal_temp:</td>
<td>battry_voltage:</td>
<td>hour:</td>
<td>minute:</td>
<td>second:</td>
<td>year:</td>
<td>month:</td>
<td>day:</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="PublicKey" value="PublicKey">
</td>
<td>
<input type="text" id="PrivateKey" value="PrivateKey">
</td>
<td>
<input type="text" id="latitude" value="33.505304">
</td>
<td>
<input type="text" id="longitude" value="-86.807809">
</td>
<td>
<input type="text" id="altitude" value="5">
</td>
<td>
<input type="text" id="heading" value="13.7">
</td>
<td>
<input type="text" id="speed" value="3">
</td>
<td>
<input type="text" id="external_temp" value="72">
</td>
<td>
<input type="text" id="internal_temp" value="70">
</td>
<td>
<input type="text" id="battry_voltage" value="12.7">
</td>
<td>
<input type="text" id="hour" value="10">
</td>
<td>
<input type="text" id="minute" value="0">
</td>
<td>
<input type="text" id="second" value="0">
</td>
<td>
<input type="text" id="year" value="2015">
</td>
<td>
<input type="text" id="month" value="6">
</td>
<td>
<input type="text" id="day" value="15">
</td>
</tr>
</tbody>
</table>
</form>
<div>
<a id="printlink" href=""></a>
</div>
<div id="BuiltLink">
</div>
</body>
<script>
var Elements = document.querySelectorAll("input");
var Data = Object();
Data.id = [];
Data.value = [];
Data.links = [];
for (i = 0; i < Elements.length; i++) {
for (z = 0; z < Elements.length; z++) {
Data.id[z] = "&" + Elements[z].id;
};
// Construct an array with all values needed to be modified.
for (y = 0; y < Elements.length; y++) {
Data.value[y] = Elements[y].value;
};
// Modify each value by adding i
for (x = 0; x < Elements.length; x++) {
Data.value[x] = Number(Data.value[x]) + i;
};
// Construct a hyperlink with current values.
Data.links[i] = "http://data.sparkfun.com/input/publicKey?private_key=privatekey" +
Data.id[2] + "=" + Data.value[2] + //
Data.id[3] + "=" + Data.value[3] +
Data.id[4] + "=" + Data.value[4] +
Data.id[5] + "=" + Data.value[5] +
Data.id[6] + "=" + Data.value[6] +
Data.id[7] + "=" + Data.value[7] +
Data.id[8] + "=" + Data.value[8] +
Data.id[9] + "=" + Data.value[9] +
Data.id[10] + "=" + Data.value[10] +
Data.id[11] + "=" + Data.value[11] +
Data.id[12] + "=" + Data.value[12] +
Data.id[13] + "=" + Data.value[13] +
Data.id[14] + "=" + Data.value[14] +
Data.id[15] + "=" + Data.value[15] +
Data.id[16] + "=" + Data.value[16];
console.log(Data.links[i])
// // Add hyperlink to dom.
};
var maslink
for (i = 0; i < Data.links.length; i++) {
maslink += '<a href="' + Data.links[i] + '">' + Data.links[i] + '</a><br>'
}
document.getElementById("BuiltLink").innerHTML = maslink
</script>
</html>