JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<p>This page has the password field initially in the form, but moves it outside onchange. 
	The not-form submit button uses pushState, and we'd expect a save-password prompt</p>
	<div id="container" style="border: 1px dotted green">
		<button id="submitBtn">submit not-form</button>
	</div>
	<form style="border: 1px dotted blue; display: block">
		<label>Password: <input type="password" name="p1"></label>
	</form>

JavaScript

document.querySelector("#submitBtn").addEventListener("click", () => {
  let label = document.querySelector("form > label");
  if (label) {
  	document.querySelector("#container").appendChild(label);
  }
  history.pushState(
    { 'page_id': 1, 'user_id': 5 }, 
    "submitted", 
    "submitted.html"
  );
});