JSFiddle - React, Tailwind, and code Playground

by Greg Bowler

HTML

<form>
  <label>
    <p>
    Your name:
    </p>
    <input name="name" />
  </label>
  
  <button>
    Set name
  </button>
</form>

<button id="getThing">
  Get the form's `data-name-thing` attrubute
</button>

JavaScript

const form = document.forms[0];
form.addEventListener("submit", function(e) {
	e.preventDefault();
  this.dataset.nameThing = this["name"].value;
  this.querySelector("button").disabled = true;
});

getThing.addEventListener("click", function(e) {
	alert(form.getAttribute("data-name-thing"));
});