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 form = document.querySelector("form");
const button = document.getElementById("checkout-button"); const button = document.querySelector("button");
const qtyInput = document.getElementById("quantity"); const qtyInput = document.querySelector("input#quantity");
const message = document.getElementById("message"); const message = document.querySelector("div#message");
if (!form || !button || !qtyInput) { if (!form || !button || !qtyInput) {
console.error("Missing required form elements");
return; return;
} }

View file

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