Member Avatar for godinu

Hello,

I need something quite similar to the script that eventually loads in the main area here: http://www.discmakers.com/livequote/ -- I'm looking for a way to allow the user to input type of jewel case, packaging, quantities, etc. I like the way this example has drop-down menus for the user to select what they need. Any ideas?

\many thanks and good karma to you!
godinu

  • 2 Contributors
  • 2 Replies
  • 235 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by godinu

Dani AI

Generated

As suggested, a Flash-style live quote can be rebuilt cleanly in jQuery. Below is a compact, accessible example that uses data-price attributes on options and extras, updates the total live (ARIA-friendly), and formats currency. This is ready to drop into a page and tweak for real prices or extra logic.

<!-- paste into an HTML file -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
  #quote { max-width:520px; padding:12px; background:#f7f7f7; border:1px solid #e0e0e0; font-family:Arial, sans-serif; }
  label { display:block; margin:8px 0; }
  fieldset { margin:8px 0; border:0; padding:0; }
  #total { margin-top:12px; padding:10px; background:#fff; border:1px solid #ddd; font-weight:700; }
</style>
</head>
<body>

<form id="quote" aria-labelledby="quoteLabel">
  <div id="quoteLabel" style="display:none">Live price calculator</div>

  <label>Jewel case
    <select id="case">
      <option data-price="0">None</option>
      <option data-price="0.50">Standard - $0.50/unit</option>
      <option data-price="0.35">Slim - $0.35/unit</option>
      <option data-price="1.25">Digipak - $1.25/unit</option>
    </select>
  </label>

  <label>Quantity
    <input id="qty" type="number" min="1" value="100">
  </label>

  <fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" class="extra" data-price="0.20" data-per="unit"> Printing - $0.20/unit</label>
    <label><input type="checkbox" class="extra" data-price="15" data-per="order"> Rush fee - $15 per order</label>
  </fieldset>
</form>

<div id="total" aria-live="polite">$0.00</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
  function parsePrice(v){ return parseFloat(v) || 0; }
  function updateTotal(){
    var base = parsePrice($('#case option:selected').data('price'));
    var qty = parseInt($('#qty').val(),10) || 0;
    var total = base * qty;

    $('.extra:checked').each(function(){
      var p = parsePrice($(this).data('price'));
      var per = $(this).data('per') || 'unit';
      total += (per === 'unit') ? p * qty : p;
    });

    var formatted = total.toLocaleString('en-US', {style:'currency', currency:'USD'});
    $('#total').text(formatted);
  }

  $('#quote').on('change input', 'select,input', updateTotal);
  updateTotal();
});
</script>
</body>
</html>

Notes and quick troubleshooting:

  • Ensure the jQuery script loads before the inline script; check DevTools Console for errors if the total stays at $0.00.
  • Keep numeric prices as plain numbers (use dot for decimals). data-price should be parseable by parseFloat.
  • For tiered quantity discounts or server-validated pricing, move the calculation logic to the server or fetch a pricing table via AJAX and apply it client-side.
  • To improve UX for large forms, debounce input events and cache lookups; add per-line subtotals if multiple product lines are needed.

This example directly answers ’s request for a functioning jQuery example and builds on ’s advice to replace the Flash widget with HTML/CSS/JS.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

That example is in Flash, but you can easily rebuild it using jQuery for example.

Member Avatar for godinu

COuld someone help me with a functioning jquery example? I am decent with basic hmtl and with all kinds of book editing and formatting, but jquery isn't my strong suit. thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.