forked from autoNumeric/autoNumeric
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
518 lines (516 loc) · 28 KB
/
index.html
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>autoNumeric</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/BobKnothe/autoNumeric/master/autoNumeric.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.auto').autoNumeric('init');
});
</script>
<style>
input[type="text"] {
text-align:right;
}
.method {
margin-top: 25px;
margin-bottom:25px;
}
.method td {
height:25px;
}
</style>
</head>
<body>
<div id="main" style="width:900px; border:#000000; border-width: 1px; border-style: solid; background-color:#FFFFFF">
<div id="banner">
<h1 style="font-family:'Comic Sans MS', cursive; background-color:#000; color:#CCCCCC; height:100px; margin-top:0px; padding-top:25px; padding-left:10px; margin-bottom: 0px;">$(selector).<span style="color:#00F">autoNumeric</span>('init', {options});</h1>
</div>
<div id="content" style="padding: 5px 10px 10px 10px; margin-top:0px">
<p>Author: Robert Knothe</p>
<p>Contact: bob{@}decorplanit.com (remove brackets)</p>
<p>Web site: <a href="http://www.decorplanit.com/plugin/">http://www.decorplanit.com/plugin/</a> complete with detailed examples and option/html 5 data code generator/</p>
<p>github: <a href="https://github.com/BobKnothe/autoNumeric">https://github.com/BobKnothe/autoNumeric</a></p>
<p>jQuery: <a href="http://plugins.jquery.com/autoNumeric/">http://plugins.jquery.com/autoNumeric/</a></p>
<p><strong>autoNumeric 1.9.46 </strong>is a jQuery plugin that automatically formats currency and numbers as you type on form inputs. It supports most International numeric formats and currency signs including those used in Europe, North and South America, Asia and India (lakhs**).</p>
<p>Any number of currency formats can reside on the same page and are configured by options that can be placed as HTML5 data attribute or passed as an argument. These settings can easily be changed at any time using the new ‘update’ method or via the callback feature. </p>
<p>Seven built in methods and fifteen options gives you the flexibility needed to use autoNumeric to its maximum potential (details below).</p>
<p><strong>Examples of autoNumeric's flexibility:</strong></p>
<form name="form1" method="post" action="">
<table width="880" border="0">
<tr>
<td colspan="3"><strong>Demonstrates some of the available decimal & thousand separators</strong></td>
</tr>
<tr>
<td>decimal '.' & thousand ',' separators</td>
<td>decimal ',' & thousand '.' separators</td>
<td>decimal '.' & thousand ' ' separators</td>
</tr>
<tr>
<td width="33%"><input type="text" class="auto"></td>
<td width="33%"><input type="text" class="auto" data-a-sep="." data-a-dec=","></td>
<td width="33%"><input type="text" class="auto" data-a-sep=" " data-a-dec=","></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"><strong>Demonstrates use of currency signs and the placement</strong></td>
</tr>
<tr>
<td>Dollar as a prefix</td>
<td>Euro as prefix</td>
<td>Swiss Franc as a suffix</td>
</tr>
<tr>
<td width="33%"><input type="text" class="auto" data-a-sign="$ "></td>
<td width="33%"><input type="text" class="auto" data-a-sep="." data-a-dec="," data-a-sign="€ "></td>
<td width="33%"><input type="text" class="auto" data-a-sep=" " data-a-dec="," data-a-sign=" CHF" data-p-sign="s"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"><strong>Demonstrates min/max values including negative values with brackets on focus out.</strong></td>
</tr>
<tr>
<td>0 to 9999 no decimal place</td>
<td>-99.99 to 1000.00 two decimal places</td>
<td>-9999.99 to 0.00 negative only w/brackets</td>
</tr>
<tr>
<td width="33%"><input type="text" class="auto" data-v-max="9999" data-v-min="0"></td>
<td width="33%"><input type="text" class="auto" data-a-sep="." data-a-dec="," data-v-min="-99.99" data-v-max="1000.00"></td>
<td width="33%"><input type="text" class="auto" data-a-sep="." data-a-dec="," data-v-min="-9999.99" data-v-max="0.00" data-n-bracket="(,)"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"><strong>Demonstrates digital grouping "hint - for none set the thousand seperator (aSep: "" or data-a-sep="") to and empty string</strong></td>
</tr>
<tr>
<td width="33%">none</td>
<td width="33%">2 India's lakhs ( on values below 1 billion)</td>
<td width="33%">4 used in some Asian countries</td>
</tr>
<td width="33%"><input type="text" class="auto" data-a-sep=""></td>
<td width="33%"><input type="text" class="auto" data-d-group="2" data-a-sign="Rs. "></td>
<td width="33%"><input type="text" class="auto" data-d-group="4" data-a-sign="¥ "></td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="33%"> </td>
</tr>
<tr>
<td colspan="3"><strong>Demonstrates non-input elements - default values are formatted on page ready - can changed via the "set" method</strong></td>
</tr>
<tr>
<td width="33%"><span class="auto">1234.56</span></td>
<td width="33%"><td class="auto">1234.56</td></td>
<td width="33%"><label class="auto">1234.56</label></td>
</tr>
<tr>
<td width="33%"><span class="auto">1234.56</span></td>
<td width="33%" class="auto">1234.56</td>
<td width="33%"><label class="auto">1234.56</label></td>
</tr>
</table>
</form>
<hr>
<p><strong>Key features and general notes:</strong></p>
<p><strong>Elements supported:</strong></p>
<ul>
<li>The input types supported:
<ul>
<li><input type="text">, <input type="hidden"> & <input> no type attribute. </li>
<li>Other input types are NOT supported including HTML 5 number type. </li>
</ul>
</li>
<li>Non-input tags supported:
<ul>
<li>'b', 'caption', 'cite', 'code', 'dd', 'del', 'div', 'dfn', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ins', 'kdb', 'label', 'li', 'output', 'p', 'q', 's', 'sample', 'span', 'strong', 'td', 'th', 'u', 'var'</li>
</ul>
</li>
</ul>
<p><strong>Default settings, options and HTML 5 data:</strong></p>
<ul>
<li>The default settings can be changed via options or HTML 5 data attribute
<ul>
<li>$(selector).autoNumeric('init', {aSep: '.', aDec: ',', aSign: '€ '}); - example using options</li>
<li>Options can be sent as a variable:
<ul>
<li>var myOptions = {aSep: '.', aDec: ',', aSign: '€ '};</li>
<li>$(selector).autoNumeric('init', {aSep: '.', aDec: ',', aSign: '€ '});</li>
</ul>
</li>
<li><input type="text" id="someID" class="someClass" data-a-sign="€ " data-a-dec="," data-a-sep="."> - example of HTML 5 data</li>
<li>Order of precedence: defaults, HTML 5 (overides defaults), options (overides defaults and HTML5 data).</li>
<li>FYI - my web site has a easy to use code genterator</li>
</ul>
</li>
</ul>
<p><strong>asp.Net WebForm requirements (new in version 1.9.37):</strong></p>
<ul>
<li>During postback the default value is re-rendered showing the updated value, because autoNumeric cannot distinguish between a page re-load and asp.net form postback so the following option or HTML5 data attribute is NEEDED (data-an-default="same value as the value attribute") to prevent errors on postback.</li>
<li>Example: if the value="1234.56" then anDefault option should be {anDefault"1234.56} or HTML5 data-an-default="1234.56" </li>
</ul>
<p><strong>Callback function:</strong></p>
<ul>
<li>Callback function is supported and can be done via options or HTML5 data.</li>
</ul>
<p><strong>Defaults values on autoNumeric controlled elements:</strong></p>
<ul>
<li>The option "aForm" controls how default values are handled on page ready. </li>
<li>When "aForm" is set to "aForm: true" the defaults values will be formatted on page ready.
<ul>
<li>Default values format: '99999.99' - see more detail below.</li>
<li>If the default value falls outside the min/max range an empty string will be returned </li>
</ul>
</li>
<li>When "aForm" is set to "aForm: false" the values will not formatted on page ready
<ul>
<li>The input field values will be formatted on the first keypress event is fired for that element </li>
</ul>
</li>
</ul>
<p><strong>Defaults values formats accepted when aForm = true:</strong></p>
<ul>
<li>Only one decimal characters is allowed - one locale decimal chartacters are accepted</li>
<li>Examples:
<ul>
<li>1234.56 => OK</li>
<li>-1234.56 => OK</li>
<li>1234,56 => OK</li>
<li>-1234.56 => OK</li>
<li>1,234.56 => fails</li>
<li>1.234,56 => fails</li>
</ul>
</li>
</ul>
<p><strong>Precision control of minimum & maximum values:</strong></p>
<ul>
<li>Controlled by "vMin" & "vMax" settings / options</li>
</ul>
<p><strong>Currency signs:</strong></p>
<ul>
<li>Most currency symbols are supported and can be placed as a prefix or suffix.</li>
</ul>
<hr>
<p><strong>Default settings & options - for a detailed info please see </strong><a href="http://www.decorplanit.com/plugin/">http://www.decorplanit.com/plugin/</a></p>
<ul>
<li style="line-height:25px"><strong>aSep: ','</strong> - controls the thousand separator (note - the thousand & decimal separators can not be the same)
<ul>
<li>aSep: '\'' apostrophe (note: the apostrophe is escaped) </li>
<li>aSep: '.' period </li>
<li>aSep: ' ' space </li>
<li>aSep: '' none</li>
</ul>
</li>
<li style="line-height:25px"><strong>dGroup: '3'</strong> - controls the digital grouping - the placement of the thousand separator
<ul>
<li>dGroup: '2' produces 22,22,22,333 (India's lakhs format on values below 1 billion) </li>
<li>dGroup: '4' produces 4,4444,4444 used in some Asian country's</li>
</ul>
</li>
<li style="line-height:25px"><strong>aDec: '.'</strong> - controls the decimal (note - the thousand & decimal separators can not be the same)
<ul>
<li>aDec: ',' comma</li>
</ul>
</li>
<li style="line-height:25px"><strong>altDec: null </strong>- altDec allows you to declare an alternative key to enter the decimal separator assigned in aDec.
<ul>
<li>developer sellectable - example: {aSep: '.', aDec: ',', altDec: '.'} would allow the period on the numeric pad to enter the decimal ","</li>
</ul>
</li>
<li style="line-height:25px"><strong>aSign: ''</strong> - desired currency symbol (examples: € or EUR). Note: other symbols can be used, such as %, °C, °F, km/h & MPH
<ul>
<li>developer sellectable - example: {aSign: '€ '} note numeric character not allowed.</li>
</ul>
</li>
<li style="line-height:25px"><strong>pSign: 'p'</strong> - controls the placement of the currency symbol (the default placement is set as a prefix
<ul>
<li>pSign: 's' - place the sign as a suffix</li>
</ul>
</li>
<li style="line-height:25px"><strong>vMin: '0.00'</strong> - values can be whole numbers, floating point, positive, zero or negative. </li>
<li style="line-height:25px"><strong>vMax: '999999999.99'</strong> - values can be whole numbers, floating point, positive, zero or negative. </li>
<li style="line-height:25px"><strong>mDec: null</strong> - overrides the number of decimal places that are set by the vMin & vMax values<BR>
</li>
<li style="line-height:25px"><strong>mRound: 'S'</strong> - controls the rounding method
<ul>
<li>mRound: 'S' Round-Half-Up Symmetric (default) </li>
<li>mRound: 'A' Round-Half-Up Asymmetric </li>
<li>mRound: 's' Round-Half-Down Symmetric (lower case s) </li>
<li>mRound: 'a' Round-Half-Down Asymmetric (lower case a) </li>
<li>mRound: 'B' Round-Half-Even "Bankers Rounding" </li>
<li>mRound: 'U' Round Up "Round-Away-From-Zero" </li>
<li>mRound: 'D' Round Down "Round-Toward-Zero" - same as truncate </li>
<li>mRound: 'C' Round to Ceiling "Toward Positive Infinity" </li>
<li>mRound: 'F' Round to Floor "Toward Negative Infinity"</li>
<li>mRound: 'CHF' Rounding for Swiss currency "to the nearest .00 or .05"</li>
</ul>
</li>
<li style="line-height:25px"><strong>aPad: true</strong> - pads the decimal places with zeros.
<ul>
<li>aPad: false - no padding</li>
</ul>
</li>
<li style="line-height:25px"><strong>nBracket: null</strong> - controls if negative values are display with brackets when the input does NOT have focus.
<ul>
<li>nBracket: '(,)' Parentheses - visable only on 'focusout' </li>
<li>nBracket: '[,]' Brackets - visable only on 'focusout' </li>
<li>nBracket: '{,}' Braces - visable only on 'focusout' </li>
<li>nBracket: '<,>' Angle brackets - visable only on 'focusout'</li>
</ul>
</li>
<li style="line-height:25px"><strong>wEmpty: 'empty'</strong> - field allowed to be empty
<ul>
<li>wEmpty: 'zero' input field will have at least a zero value </li>
<li>wEmpty: 'sign' the currency symbol is always present</li>
</ul>
</li>
<li style="line-height:25px"><strong>lZero: 'allow'</strong> - allows leading zeros as you type but are removed on focusout event
<ul>
<li>lZero: 'deny' leading zeros not allowed. </li>
<li>lZero: 'keep' leading zeros allowed and will be retained on the focusout event</li>
</ul>
</li>
<li style="line-height:25px"><strong>aForm: true</strong>- formats the default values on page ready (default value decimal must be a period / full stop "####.##")
<ul>
<li>aForm: false - default value are not formatted on page ready.</li>
</ul>
</li>
<li><strong>anDefault: null</strong> - this is a helper option for <strong>asp.net only pages</strong> with form postback. THe underling issue is asp.net re-renders the page on postback over writing the original default value.
<ul>
<li> should be the value of the unformatted default value for the original pag</li>
<li>examples:
<ul>
<li>no default value='' {anDefault: ''}</li>
<li>value=1234.56 {anDefault: '1234.56'}</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<table width="997" class="method" >
<tbody>
<tr>
<td colspan="2"><strong>Method(s)</strong></td>
<td width="397"><strong>Description</strong></td>
<td width="423"><strong>Format</strong></td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'init'</td>
<td width="397">initializes autoNumeric</td>
<td>$(selector).autoNumeric('init', {options});</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'destroy'</td>
<td width="397">disables autoNumeric for the selected element</td>
<td>$(selector).autoNumeric('destroy');</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'update'</td>
<td width="397">updates options - can be called multiple times</td>
<td>$(selector).autoNumeric('update', {options});</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'set'</td>
<td width="397">returns a formatted string via ".val()" or ".text'</td>
<td>$(selector).autoNumeric('set', value);</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'get'</td>
<td width="397">returns un-formatted object via ".val()" or ".text()"</td>
<td>$(selector).autoNumeric('get');</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'getString'</td>
<td width="397">returns a string 'URL encoded' from the selected form</td>
<td>$(selector).autoNumeric('getString');</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'getArray'</td>
<td width="397">returns a array of objects from the selected form</td>
<td>$(selector).autoNumeric('getArray');</td>
</tr>
<tr>
<td width="26"> </td>
<td width="131">'getSettings'</td>
<td width="397">returns settings for the selected element </td>
<td>$(selector).autoNumeric('getSettings');</td>
</tr>
</tbody>
</table>
<hr>
<p><strong>'init' method </strong><strong>- </strong>initializes autoNumeric and must be run before other methods can be called.</p>
<ul>
<li>$(selector).autoNumeric('init'); <em>"initialized with defaults only"</em></li>
<li>$(selector).autoNumeric(); <em>"initialized with defaults only"</em></li>
<li>$(selector).autoNumeric('init', {options}); <em>"initialized with options"</em></li>
<li>$(selector).autoNumeric({options}); <em>"initialized with options"</em></li>
<li>var someOptions = {options}<em>; "options placesd as a variable"</em>
<ul>
<li>$(selector).autoNumeric('init', someOptions); </li>
<li>$(selector).autoNumeric(someOptions);</li>
</ul>
</li>
</ul>
<p><strong>Note the following</strong>:</p>
<ul>
<li>Using <strong>'init'</strong> is optional on the initialize method all other methods require being declared.</li>
<li>'init' is case sensitive.</li>
<li>The input element is the only tag that supports auto formatting as you type.</li>
<li>Calling the 'init' method on a element that is already initilized will NOT change the options.</li>
</ul>
<p><strong>Warning</strong></p>
<p>Calling the "init" method on a element where the decimal point "aDec" and the thousand separator "aSep" are equal will cause an error message to be thrown to the javascript console.</p>
<p> Calling the 'init' methods on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.</p>
<hr>
<p><strong>'destroy' method </strong>- removes autoNumeric from the selected element(s).</p>
<ul>
<li>$(selector).autoNumeric('destroy'); </li>
</ul>
<p><strong>Note the following</strong>:</p>
<ul>
<li>The method name 'destroy' is required</li>
<li>'destroy' is case sensitive.</li>
<li>Options and arguments are NOT accepted.</li>
<li>Existing values are NOT modified or deleted. If you need to remove the formatting you should do so prior to calling the destroy method via the 'get' method described later.</li>
<li>The selected fields or elements can be re-initialized at any time.</li>
</ul>
<hr>
<p><strong>"update' method </strong>- easily update element(s) that have been previously initialized 'init' by autoNumeric.</p>
<ul>
<li>$(selector).autoNumeric('update', {options}); </li>
</ul>
<p><strong>Note the following</strong>:</p>
<ul>
<li>The 'update' method name is required "$(selector).autoNumeric('update', {options});".</li>
<li>'update' is case sensitive.</li>
<li>Options are required and are accepted as an argument or variable (see the 'init' method description).</li>
<li>The 'update' method will function on all elements supported by autoNumeric.</li>
<li>The 'update' method can be called repeatably with one or more options at a time.</li>
<li>Existing values will be stripped, preserved and reformatted to the new settings.</li>
<li>Values that fall outside the range of the new min/max range will be returned as "0.00" (depending on the number of decimal places and the decimal separator character in the settings).</li>
</ul>
<p><strong>Warning</strong></p>
<p> Calling the 'update' method prior to the 'init' method will cause a error message to be thrown to the Javascript console.</p>
<p> Calling the "update" method on a element where the decimal point "aDec" and the thousand separator "aSep" are equal will cause an error message to be thrown to the javascript console.</p>
<p> Calling the 'update' method on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.</p>
<hr>
<p><strong>'set' method </strong>- The 'set' method allows you to easily format numbers and numeric strings</p>
<p><strong>Proper format for the 'set' method</strong>.</p>
<ul>
<li>$(selector).autoNumeric('set', value); </li>
</ul>
<p><strong>Note the following</strong>:</p>
<ul>
<li>The 'set' method name is required "$(selector).autoNumeric('set', value);".</li>
<li>'set' is case sensitive.</li>
<li>Options are NOT accepted.</li>
<li>The 'set' method can be used on any element that are supported by autoNumeric.</li>
<li>The value can be sent as a string or variable
<ul>
<li>$(selector).autoNumeric('set', '1234.56');</li>
<li>var someValue = 1234.56 then $(selector).autoNumeric('set', someValue);</li>
</ul>
</li>
<li>Returns a string</li>
<li>Values that fall outside the min/max range will not be 'set' and a error message will be thrown to the javascript console.</li>
<li>Setting "set" a null value returns an empty string.</li>
</ul>
<p> Calling the 'set' method prior to the 'init' method will cause a error message to be thrown to the Javascript console.</p>
<p> Calling the 'set' method on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.</p>
<hr>
<p><strong>'get' method - </strong>The 'get' method allows you to easily remove the formating from a string on a autoNumeric controlled element and returns a string.</p>
<p><strong>Proper format for the 'get' method</strong>.</p>
<ul>
<li>$(selector).autoNumeric('get'); </li>
</ul>
<p><strong>Note the following:</strong></p>
<ul>
<li>The 'get' method name is required "$(selector).autoNumeric('get');".</li>
<li>'get' is case sensitive.</li>
<li>Options and values are NOT accepted.</li>
<li>Works on any element supported by autoNumeric.</li>
<li>Returns only the first element of the selector.</li>
<li>Returns a string.</li>
</ul>
<p><strong>Warning</strong></p>
<p> Calling the 'get' method prior to the 'init' method will cause a error message to be thrown to the Javascript console.</p>
<p> Calling the 'get' method on a element that is not supported by autoNumeric will cause an error message to be thrown to the javascript console.</p>
<hr>
<p><strong>'</strong><strong>getString' method </strong>- this basically uses jQuery's .serialize() method which creates a text string (URL-encoded notation) from a set of form elements that is ready for submission. The extra step taken here is the string is split and iterated through and the formatted values are replaced with unformatted values. The string is then joined back together and returned.</p>
<p><strong>Proper format for the 'getString' method</strong>.</p>
<ul>
<li>$(selector).autoNumeric('getString'); </li>
</ul>
<p><strong>Note the following:</strong></p>
<ul>
<li>The 'getString' method name is required "$(selector).autoNumeric('getString');".</li>
<li>Options and value are NOT accepted.</li>
<li>The "getString" method does NOT validate the form inputs. It will return what has been entered including empty strings.</li>
<li>If your selector includes non-autoNumeric fields they will be returned untouched.</li>
<li>Only <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">"successful controls</a>" are serialized to the string. Please read more about <a href="http://api.jquery.com/serialize/">jQuery's .serialize() method</a> to see if "getString" method will work for your application.</li>
<li>Returns a string</li>
</ul>
<p><strong>Warning</strong></p>
<p> At least one input must be controled by autoNumeric. If not the 'getSting' method will cause a error message to be thrown the the Javascript console.</p>
<hr>
<p><strong>'getArray' method </strong>- this basically uses jQuery's .serializeArray() method which returns a Javascript array of objects, ready to be encoded as a JSON string. The extra step taken here is the the object array is iterated through and formatted values are replaced with un-formatted values and returned.</p>
<p><strong>Proper format for the 'getArray' method</strong>.</p>
<ul>
<li>$(selector).autoNumeric('getArray'); </li>
</ul>
<p><strong>Note the following:</strong></p>
<ul>
<li>The 'getArray' method name is required "$(selector).autoNumeric('getArray');".</li>
<li>Options are NOT accepted.</li>
<li>An object is returned. If you want this converted to a valid JSON string to submit to the server you should consider <a href="https://github.com/douglascrockford/JSON-js">JSON2.js</a> as I did in this demo.</li>
<li>The "getArray" method does NOT validate the form inputs. It will return what has been entered including empty strings.</li>
<li>If your selector includes non-autoNumeric fields they will be returned untouched.</li>
<li>Only <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">"successful controls</a>" are serialized to the string. Please read more about <a href="http://api.jquery.com/serializeArray/">jQuery's .serializeArray() method</a> to see if "getArray" method will work for your application.</li>
</ul>
<p><strong>Warning</strong></p>
<p> At least one input must be controled by autoNumeric. If not the 'getArray' method will cause a error message to be thrown the the Javascript console.</p>
<hr>
<p><strong>'getSettings' method </strong>- this returns an object that shows the autoNumeric settings for the field. You may find this helpful when developing a page.</p>
<p><strong>Proper format for the 'getArray' method</strong>.</p>
<ul>
<li>$(selector).autoNumeric('getSettings'); </li>
</ul>
<p><strong>Note the following</strong>:</p>
<ul>
<li>Only the first element from the selector will be returned.</li>
<li>If the selector points to a non-autoNumeric field or tag "undefined" is returned.</li>
</ul>
<p><strong>Warning</strong></p>
<p> Calling the 'getSettings' method prior to the 'init' will cause a error message to be thrown the the Javascript console.</p>
<p> </p>
<hr>
<p>Complete documentation and examples can be found at <a href="http://www.decorplanit.com/plugin/">http://www.decorplanit.com/plugin/</a> </p>
<p>Need a custom modification? Cantact me at bob{@}decorplanit.com or github.</p>
<p>Enjoy</p>
</div>
</div>
</body>
</html>