webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Promo Code Input — Apply Coupon HTML CSS JS

Promo Code Input · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsDeveloper ToolsForms & Validation

Copy & paste

Source Code

<div class="pci-card">
  <h3>Order summary</h3>

  <div class="pci-line"><span>Subtotal</span><span id="pciSubtotal">$240.00</span></div>
  <div class="pci-line pci-discount" id="pciDiscountLine" hidden><span id="pciDiscountLabel">Discount</span><span id="pciDiscount">−$0.00</span></div>
  <div class="pci-line"><span>Shipping</span><span>$8.00</span></div>

  <div class="pci-promo">
    <label for="pciInput">Promo code</label>
    <div class="pci-applied" id="pciApplied" hidden>
      <span class="pci-applied-tag"><b id="pciAppliedCode"></b> applied</span>
      <button type="button" id="pciRemove" aria-label="Remove code">Remove</button>
    </div>
    <form class="pci-form" id="pciForm" novalidate>
      <input type="text" id="pciInput" placeholder="Enter code" autocomplete="off" spellcheck="false">
      <button type="submit" id="pciApply">Apply</button>
    </form>
    <p class="pci-msg" id="pciMsg" hidden></p>
  </div>

  <div class="pci-line pci-total"><span>Total</span><span id="pciTotal">$248.00</span></div>

  <p class="pci-hint">Try <b>SAVE20</b>, <b>FREESHIP</b>, or <b>HALFOFF</b>.</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Percent, fixed, and free-shipping coupons
One discountAmount() function handles three coupon types, each declared as data in the CODES map.
Specific validation messages
Empty, duplicate, and invalid codes each get a distinct message instead of a generic failure.
Case- and whitespace-insensitive
trim().toUpperCase() matching means "save20", " SAVE20 ", and "Save20" all resolve to the same coupon.
Live-recalculating total
Applying or removing a code recomputes subtotal + shipping − discount instantly, floored at zero.
Applied state with remove
A successful code shows a green confirmation chip with a Remove link that restores the input and refocuses it.
Adaptive discount line
The discount row only shows when active and labels itself by coupon type ("Discount (SAVE20)" vs "Free shipping").
Fixed-discount clamping
A flat-amount coupon never exceeds the subtotal, so the total can't go negative.
Ready for server-side validation
Swap the client CODES lookup for a fetch to your real coupon API while keeping the instant-feedback UI.

About this UI Snippet

Promo Code Input — Coupon Validation, Discount Types & Live Order Total

Screenshot of the Promo Code Input snippet rendered live

Almost every checkout has a "promo code" or "discount code" field, and it's deceptively easy to get wrong: codes need validating, different coupon types calculate differently, the order total must update without a page reload, and the user needs clear feedback whether a code worked or not. This snippet builds a complete, correct promo-code experience in plain HTML, CSS, and vanilla JavaScript — supporting percentage, fixed-amount, and free-shipping coupons, with an applied state, a remove control, and a live-recalculating total.

Three coupon types, one calculation function

Real stores run more than one kind of discount, so discountAmount() handles three: percent (20% off the subtotal), fixed (a flat $10 off, clamped so it never exceeds the subtotal and produces a negative price), and shipping (offsets the shipping line for free delivery). Each code in the CODES map declares its type and value, so adding a new coupon is a one-line data change, not new logic. The total always recomputes as subtotal + shipping − discount, floored at zero.

Validation that explains itself

Submitting a code runs through ordered checks, each with a specific message rather than a generic failure: an empty field ("Enter a promo code first"), a code that's already applied ("That code is already applied"), and an unrecognised code ("'BOGUS' is not a valid code"). Invalid input also flashes a red border on the field. This specificity matters at checkout — a shopper who typed a code from an email needs to know whether they fat-fingered it or it simply expired, not just that "something went wrong."

Case- and whitespace-insensitive matching

Codes are normalised with trim().toUpperCase() before lookup, and the input is visually uppercased via CSS, so "save20", " SAVE20 ", and "Save20" all resolve to the same coupon. This removes the single most common reason a valid code "doesn't work" — invisible whitespace or a lowercase letter — without the user ever having to think about it.

Applied and remove states

A successfully applied code hides the input and shows a green confirmation chip ("✓ SAVE20 applied") with a Remove link. Removing it restores the input, clears the discount line, recomputes the total, and refocuses the field — so a shopper can swap one code for a better one without confusion. The discount line itself only appears when a code is active, and its label adapts ("Discount (SAVE20)" vs "Free shipping") to match the coupon type.

Where the real validation lives

Client-side code-matching is for instant feedback only — it must never be the source of truth, because anyone can read the CODES map in the page source. In production the field still gives immediate UX, but the authoritative check (does this code exist, is it expired, is it limited to this customer, does it stack) happens server-side when the order is priced and again when it's placed. The FAQs cover wiring the front end to that real validation endpoint while keeping this snippet's instant-feedback feel.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSAn order summary renders with a subtotal, shipping, total, and a promo-code field. Try SAVE20, FREESHIP, or HALFOFF.
  2. 2
    Apply a valid codeEnter SAVE20 and click Apply — a discount line appears, the total drops, and a green "applied" chip replaces the field.
  3. 3
    See validation errorsEnter a made-up code or leave it blank — a specific red message explains exactly what's wrong, and the field flags invalid.
  4. 4
    Remove an applied codeClick Remove on the applied chip — the discount clears, the total restores, and the input comes back focused for a new code.
  5. 5
    Add your own couponsAdd entries to the CODES map with a type (percent / fixed / shipping) and value — no new logic needed.
  6. 6
    Validate codes server-sideReplace the client-side CODES lookup with a fetch to your coupon-validation endpoint, keeping the same applied/error UI states.

Real-world uses

Common Use Cases

E-commerce checkout
The standard discount-code field in a cart or checkout summary — pair with an order summary and a free shipping bar.
Subscription and SaaS billing
Apply a launch or referral coupon to a plan before payment, recalculating the recurring total.
Event and ticket purchases
Let attendees redeem early-bird or partner codes against a ticket order.
Course and digital-product sales
Accept a discount code on a one-off purchase, pairing with a promo or social proof popup that delivered the code.
Booking and reservation flows
Apply a promotional rate code to a booking total before confirming.
Learning multi-state form patterns
A reference for input → applied → removed state transitions and typed calculations in one small component.

Got questions?

Frequently Asked Questions

Replace the client-side CODES lookup in the submit handler with a fetch to your coupon-validation endpoint, passing the entered code and the cart contents; the server returns whether it's valid plus the discount type and amount. Show a "Checking…" state during the request, then the applied chip on success or the inline error on failure — the rest of the UI stays the same.

Anyone can read the CODES map in your page source, so client-side matching is purely for instant feedback. The authoritative check — does the code exist, is it expired, is it usage-limited or customer-specific, can it stack with other offers — must run server-side when the order is priced and again when it's placed, or the discount can be forged. Keep the client check for UX, never for enforcement.

Track applied as an array instead of a single value, render one chip per code, and sum their discounts in recalc() — but enforce your stacking rules (which combinations are allowed, caps on total discount) server-side. Most stores deliberately disallow stacking, which the single-code model here already enforces.

Give each code optional conditions (minSubtotal, eligibleProductIds) in its data, and check them before applying — if the cart doesn't qualify, show a specific message ("SAVE20 requires a $100 minimum") rather than silently applying a $0 discount. The same conditions must be re-validated server-side at checkout.

In React, hold the applied code and message in useState and derive the total with useMemo; in Vue, use ref()/computed(); in Angular, use a component field with a getter. The discount-type calculation is plain JavaScript, and the apply/remove handlers map directly to event handlers in each framework — swap the CODES lookup for an async validation call.