input field formatting

Hi,

I have a input text box. It accepts number. This input field is submitted to the next page using POST.

What i want to do :
1. format the input field to currency format
2. but while POST-ing the field to next page, only the numeric value of the field should get posted.

Example:
Case 1: Text input field (without formatting)
2500
after post 2500

Case 2: (Desired case) Text input field
$ 2,500.00
after post 2500
genius_geekAsked:
Who is Participating?
 
AmickCommented:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var dollars = ''
var decimal = '.'
var cents = ''
var pennies = false;

function editVal(e) {
    e = e || event
    that = e.target || e.srcElement

    switch (e.keyCode) {
      case 8:
            if (pennies == false) {
                if (dollars.length) dollars = dollars.substring(0, dollars.length - 1);
            } else {
                if (cents.length) {
                    cents = cents.substring(0, cents.length - 1)
                } else {
                pennies = false
                }
            }
            that.value = "$"+dollars + decimal + cents;

            return false;
    }
}
function showIt() {
      alert(dollars + decimal + cents);
      }

function showVal(e) {
    e = e || event
    that = e.target || e.srcElement

    var m48 = (e.charCode || e.keyCode) - 48

    switch (m48) {
        case -2: pennies = true; break;
        case 0: if (!dollars.length && pennies==false) break;
        case 1: case 2: case 3: case 4: case 5: case 6: case 7: case 8: case 9:
            if (pennies == false) {
                if (dollars.length < 9) dollars = dollars + m48;
            } else {
                if (cents.length < 2) cents = cents + m48;
            }
            break
        default:
    }
    that.value = "$"+dollars + decimal + cents;


    return false;
}

    </script>
    <title></title>
  </head>
  <body>
    <form onsubmit="showIt()">
      <input id='amount'>
      <input type="submit" value="Submit" />
    </form>
    <script type="text/javascript">
      document.getElementById('amount').onkeypress = showVal;
      document.getElementById('amount').onkeydown = editVal;
    </script>
  </body>
</html>

For discussion of the format as you type code:  http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/295485/format-dollar-input-as-you-type
0
 
AmickCommented:
Couldn't you simply format the display variable as "$"+mynumber.toFixed(2), and post mynumber.
0
 
genius_geekAuthor Commented:
its a textbox, its not a label. the formatting needs to be done as you type.
0
 
genius_geekAuthor Commented:
http://jsfiddle.net/jfCGD/1/ decimals and commas do not work.
0
 
AmickCommented:
Decimals do work, but you are correct that commas don't as no comma logic has been provided.
Try entering 123.45 and you should see $123.45 in your input box and 123.45 as the submitted value.
Example
The purpose of the example code was simply to illustrate the first response by showing a way to use formatted input in the input box while submitting an unformatted value.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.