JSFiddle - React, Tailwind, and code Playground
HTML
<div class="method">
<h3>Method 1</h3>
<form>
<input value="Hello" style="width:30px;" />
<input type="submit" />
</form>
</div>
<div class="method">
<h3>Method 2</h3>
<form id="f2">
<input value="Hello" style="width:30px;" />
<input type="submit" />
</form>
</div>
CSS
.method{
float:left;
width:100px;
border:2px solid red;
margin: 1px;
}
JavaScript
// method 1
document.getElementsByTagName("input")[1].onclick = function () {
this.disabled = true;
};
// method 2
document.getElementById("f2").onsubmit = function() {
this.children[1].disabled = true;
return false; // prevent form from actually posting (only for demo purposes)
}