Real-Time Price Formatter using HTML and JavaScript

By Posted on

In this article, we’ll walk you through creating a real-time price formatter using HTML and JavaScript that automatically adds a dollar ($) prefix and thousands separators (e.g., $1,000) as users type. This feature is perfect for e-commerce sites, financial forms, or any web application requiring clean price inputs. We’ll also show how to display raw data upon submission, ensuring clarity for both users and developers. This SEO-optimized guide is designed to be easy to understand, even for beginners!

Why Use a Real-Time Price Formatter?

A real-time price formatter improves user experience by instantly formatting numbers as they’re typed, making inputs like 1000 appear as $ 1,000. This is especially useful for:

  • E-commerce platforms: Display product prices clearly.
  • Financial forms: Ensure accurate and readable data entry.
  • User engagement: Provide instant visual feedback, reducing errors.

Our solution uses Bootstrap for a sleek design and JavaScript for dynamic formatting, with a submission feature that displays raw data (e.g., 1000 instead of $ 1,000) to confirm what’s sent to the server.

Real-Time Dollar Formatter

Example Price Formatter

                        

                    

                

            

        

    

    
    











HMTL Code





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Dollar Formatter</title>
</head>
<body class="bg-light d-flex align-items-center justify-content-center min-vh-100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h1 class="card-title text-center mb-4">Price Formatter</h1>
                        <form id="priceForm">
                            <div class="mb-3">
                                <label for="original_price" class="form-label">Original Price</label>
                                <input type="text" class="form-control" id="original_price" placeholder="Enter original price" required>
                            </div>
                            <div class="mb-3">
                                <label for="selling_price" class="form-label">Selling Price</label>
                                <input type="text" class="form-control" id="selling_price" placeholder="Enter selling price" required>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">Submit</button>
                        </form>
                        <div id="result" class="mt-4 d-none">
                            <pre id="result_text" class="bg-dark p-3 border rounded"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>










Bootstrap





//copy and paste this before </head> :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

//copy and paste this before </body :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>











Javascript





<script>
        // Format angka dengan pemisah ribuan dan prefix $
        function formatDollar(value) {
            if (!value) return '';
            let cleanValue = value.replace(/\D/g, ''); // Hapus semua kecuali angka
            return '$ ' + Number(cleanValue).toLocaleString('en-US');
        }

        // Hapus format untuk mendapatkan nilai murni
        function parseDollar(value) {
            return value.replace(/[^0-9]/g, ''); // Hapus semua kecuali angka
        }

        // Inisialisasi format untuk input harga
        const priceInputs = ['original_price', 'selling_price'];
        priceInputs.forEach(id => {
            const input = document.getElementById(id);
            input.addEventListener('input', function(e) {
                let value = parseDollar(e.target.value);
                e.target.value = formatDollar(value);
            });
            input.addEventListener('blur', function(e) {
                let value = parseDollar(e.target.value);
                e.target.value = formatDollar(value);
            });
        });

        // Handle form submission
        const form = document.getElementById('priceForm');
        const resultDiv = document.getElementById('result');
        const resultText = document.getElementById('result_text');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const originalPrice = parseDollar(document.getElementById('original_price').value);
            const sellingPrice = parseDollar(document.getElementById('selling_price').value);
            
            resultText.textContent = `Send data:\nOriginal price ${originalPrice}\nSelling price ${sellingPrice}`;
            resultDiv.classList.remove('d-none');
        });
    </script>





Done. Happy Codding!