Solved

input field formatting

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Override MS CSS in SharePoint Online Modal Form 19 42
asp Google Map 2 26
Javascript 2 20
Php logic to add to date card 9 18
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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)

839 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