JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test login capture on form removal</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>
<form>
  <p>Name: <input type="text" id="uname"></p>
  <p>Password: <input type="password"></p>
</form>
<button onclick="sendDataAndRemoveForm()">
  Fetch and remove form
</button>
<button onclick="removeForm()">
  Just remove form
</button>

<script type="text/javascript">
async function sendDataAndRemoveForm() {
  console.log("performing fetch");
  await fetch(location.pathname);
  let f = document.querySelector("form");
  removeForm();
}
async function removeForm() {
  let f = document.querySelector("form");
  console.log("removing form");
  f.parentNode.removeChild(f);
}
</script>
</body>
</html>