fix: checklist required mechanism

This commit is contained in:
Teajey 2024-05-08 22:54:13 +12:00
parent 635c2a2c15
commit 583e5d6beb
Signed by: Teajey
GPG Key ID: 970E790FE834A713
3 changed files with 13 additions and 11 deletions

View File

@ -5,11 +5,14 @@
<title>Lishwist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function someChecked(checkList) {
if (!checkList) {
return
function getSubmissionNames(form) {
return Array.from(new FormData(form).keys());
}
return Array.from(checkList).some(({checked}) => checked);
function acceptNames(form, submitId, ...acceptedNames) {
const submissionNames = getSubmissionNames(form);
const submitter = document.getElementById(submitId);
const accepted = submissionNames.length > 0 && submissionNames.every((name) => acceptedNames.includes(name));
submitter.disabled = !accepted;
}
</script>
</head>

View File

@ -9,9 +9,9 @@
</nav>
<h2>{{.Username}}'s list</h2>
<form method="post" action="/{{.UserReference}}/update" autocomplete="off"
onchange="const checked = someChecked(this.unclaimed) || someChecked(this.claimed); this.mode[0].disabled = !checked; this.mode[1].disabled = !checked;">
<button type="submit" name="mode" value="claim" disabled>Claim/Unclaim</button>
<button type="submit" name="mode" value="complete" disabled>Complete</button>
onchange="acceptNames(this, 'claimSubmit', 'claimed', 'unclaimed'); acceptNames(this, 'completeSubmit', 'claimed');">
<button id="claimSubmit" type="submit" name="mode" value="claim" disabled>Claim/Unclaim</button>
<button id="completeSubmit" type="submit" name="mode" value="complete" disabled>Complete</button>
<ul>
{{range .Gifts}}
<li>

View File

@ -11,9 +11,8 @@
</dd>
</dl>
<h2>Your list</h2>
<form method="post" action="/wishlist/delete" onchange="this.mode.disabled = !someChecked(this.gift)"
autocomplete="off">
<button type="submit" name="mode" value="delete" disabled>Delete</button>
<form method="post" action="/wishlist/delete" onchange="acceptNames(this, 'deleteSubmit', 'gift')" autocomplete="off">
<button id="deleteSubmit" type="submit" name="mode" value="delete" disabled>Delete</button>
<ul>
{{range .Gifts}}
<li>