Ajax Level 2: Send Form Data

gistfile1.js

function sendForm(form) {
  var formContent = new FormData(form); //Get existing form content. Optional argument
  formContent.append("hiddenId", "1234");
  formContent.append("iceCream", "Vanilla");
  formContent.append("currentLocation", "1223084.284|1209843.239");
  
  var progressBar = document.querySelector("progress");
  var xhr = new XMLHTTPRequest();
  xhr.open("POST", "server.php", true);
  xhr.send(formContent);
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };
}

<progress value="0" max="100"></progress>
<form id="myform" name="myform" action="server.php">
  <input type="text" name="username" value="johndoe">
  <input type="number" name="id" value="123456">
  <input type="submit" onclick="return sendForm(this.form);">
</form>