Solved

input field formatting

Posted on 2012-04-01
5
603 Views
Last Modified: 2012-04-02
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
0
Comment
Question by:genius_geek
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 37794202
Couldn't you simply format the display variable as "$"+mynumber.toFixed(2), and post mynumber.
0
 

Author Comment

by:genius_geek
ID: 37794208
its a textbox, its not a label. the formatting needs to be done as you type.
0
 
LVL 12

Accepted Solution

by:
Amick earned 500 total points
ID: 37794258
<!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
 

Author Comment

by:genius_geek
ID: 37794311
http://jsfiddle.net/jfCGD/1/ decimals and commas do not work.
0
 
LVL 12

Expert Comment

by:Amick
ID: 37795658
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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now