calx.js/examples/test-currency-mask.html at master · xsanisty/calx.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Currency Input Mask</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .content { max-width: 600px; }
        .test-case {
            background: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background: #f7fafc;
            border-radius: 4px;
        }
        .result strong {
            color: #2c5282;
        }
        input[readonly] {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-content">
            <a href="index.html" class="navbar-brand">
                <span>📊</span> jQuery Calx Examples
            </a>
            <div class="navbar-links">
                <a href="index.html">Home</a>
                <a href="test-currency-mask.html" class="active">Currency Test</a>
            </div>
        </div>
    </nav>

    <div class="content">
        <h1>Currency Input Mask Test</h1>

        <div class="alert alert-info">
            <strong>Test Instructions:</strong>
            <ol>
                <li>Type <code>$4000</code> in the input field below</li>
                <li>Press Enter or click outside the field (blur)</li>
                <li>The dependent cells should update automatically</li>
                <li>The input should show formatted value: <code>$4,000.00</code></li>
            </ol>
        </div>

        <form id="testForm" class="test-case">
            <h3>Test Case: Currency with Dependents</h3>

            <div class="form-group">
                <label>Amount (type: $4000):</label>
                <input type="text"
                       data-cell="A1"
                       data-format="currency"
                       value="1000"
                       placeholder="Type $4000">
                <p class="help-text">Try typing: $4000, 4000, $4,000.00, or any variant</p>
            </div>

            <div class="form-group">
                <label>Quantity:</label>
                <input type="number" data-cell="A2" value="2">
            </div>

            <div class="result">
                <div class="form-group">
                    <label>Total (A1 * A2):</label>
                    <input type="text"
                           data-cell="A3"
                           data-formula="A1*A2"
                           data-format="currency"
                           readonly>
                </div>

                <div class="form-group">
                    <label>Tax (10% of Total):</label>
                    <input type="text"
                           data-cell="A4"
                           data-formula="A3*0.1"
                           data-format="currency"
                           readonly>
                </div>

                <div class="form-group">
                    <label>Grand Total:</label>
                    <input type="text"
                           data-cell="A5"
                           data-formula="A3+A4"
                           data-format="currency"
                           readonly>
                    <p class="help-text">Expected: $8,800.00 when Amount is $4000 and Quantity is 2</p>
                </div>
            </div>
        </form>

        <div class="alert alert-warning">
            <strong>Debug Info:</strong>
            <ul>
                <li>Open browser console (F12) to see calculation logs</li>
                <li>Check if cell values update correctly</li>
                <li>Verify formatting appears after blur</li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <a href="index.html">← Back to Examples</a>
    </div>

    <!-- Load jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Load jQuery Calx -->
    <script src="../dist/jquery.calx.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize Calx
            $('#testForm').calx({
                autoCalculate: true
            });

            console.log('✅ Currency mask test initialized');
            console.log('Type $4000 in the Amount field and press Enter or blur');

            // Log cell values when they change
            $('#testForm').on('blur change', 'input[data-cell="A1"]', function() {
                setTimeout(function() {
                    const a1 = $('#testForm').calx('getCellValue', 'A1');
                    const a3 = $('#testForm').calx('getCellValue', 'A3');
                    const a5 = $('#testForm').calx('getCellValue', 'A5');
                    console.log('After blur/change:');
                    console.log('  A1 (Amount):', a1);
                    console.log('  A3 (Total):', a3);
                    console.log('  A5 (Grand Total):', a5);
                }, 100);
            });
        });
    </script>
</body>
</html>