JSFiddle - React, Tailwind, and code Playground
HTML
<template name="addVote">
<div class="form-row choices">
<label><input type="radio" name="vote" value="Yes"><i></i><span>Yes</span></label>
<label><input type="radio" name="vote" value="No"><i></i><span>No</span></label>
<label><input type="radio" name="vote" value="Undecided"><i></i><span>I’m Undecided</span></label>
</div>
<div class="form-row">
<button class="button-submit">Submit and view results</button>
</div>
</template>
JavaScript
if (localStorage.vote) {
localStorage.vote = localStorage.vote;
//user has already cast a vote, reflect this
document.querySelector(".form-row").querySelector("input[value='"+localStorage.vote+"']").setAttribute("checked", true);
//disable the submit
document.querySelector(".button-submit").setAttribute("disabled", true);
}
function setLocalStorageVote()
{
//call when user has cast the vote.
localStorage.vote = document.querySelector(".form-row").querySelector("input[type='radio']:checked").value;
}
document.querySelector(".button-submit").onclick = setLocalStorageVote; //using onclick here just for demonstrating purposes. Use addEventListener in production code!