Solved

input field formatting

Posted on 2012-04-01
5
606 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

911 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

22 Experts available now in Live!

Get 1:1 Help Now