fix(frontend): improve form selectors and markup

Refactor JavaScript to use querySelector for robustness. Update HTML
form to use POST method and correct script loading. Fix message div
syntax for better accessibility and compatibility.
This commit is contained in:
Ruidy 2025-09-28 14:16:53 +02:00
parent aaf1289f6b
commit d112a4f6e8
No known key found for this signature in database
GPG key ID: 705C24D202990805
2 changed files with 8 additions and 7 deletions

View file

@ -1,10 +1,11 @@
(() => {
const form = document.getElementById("checkout-form");
const button = document.getElementById("checkout-button");
const qtyInput = document.getElementById("quantity");
const message = document.getElementById("message");
const form = document.querySelector("form");
const button = document.querySelector("button");
const qtyInput = document.querySelector("input#quantity");
const message = document.querySelector("div#message");
if (!form || !button || !qtyInput) {
console.error("Missing required form elements");
return;
}

View file

@ -9,6 +9,7 @@
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
/>
<link rel="stylesheet" href="/static/main.css" />
<script defer src="/static/app.js"></script>
</head>
<body>
<main class="card">
@ -17,13 +18,12 @@
<div class="price">
{{ .PriceDisplay }} <span class="currency">{{ .Currency }}</span>
</div>
<form id="checkout-form" action="/api/checkout">
<form id="checkout-form" action="/api/checkout/" method="POST">
<label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="number" value="1" min="1" />
<button id="checkout-button" type="submit">Buy now</button>
</form>
<div id="message" role="status" aria-live="polite"></div>
<div id="message" role="status" aria-live="polite" />
</main>
<script src="/static/app.js" defer></script>
</body>
</html>