Uly.me

cloud engineer

  • Home
  • About
  • Archives
Home/HTML/Numbers And Currency On Forms

November 21, 2012

Numbers And Currency On Forms

This article will show you how to limit currency and numbers only in a form. There are essentially two different approaches when validating data. One way is to validate before submitting the form. The other is to validate after submitting the form. Obviously, validating before submit has its own merits. Incorrect data can be corrected before hitting the submit button. In this article, we will validate a field to allow numbers and currency only. We will allow up two decimal places to reflect currency values. The HTML markup is detailed below.

HTML Form

We have a simple form with one input and a submit button. There are two Javascript functions in the input field. The blockNonNumbers function allow numbers only to be typed on the input field. Non-number characters are ignored. The extractNumber function formats the input to two decimal places.

<form id="login" method="post" action=""> 
<input type="text" name="username" value="" 
 onblur="extractNumber(this,2,false);" 
 onkeyup="extractNumber(this,2,false);" 
 onkeypress="return blockNonNumbers(this, event, true, false);" />
</form>

<form id="login" method="post" action=""> <input type="text" name="username" value="" onblur="extractNumber(this,2,false);" onkeyup="extractNumber(this,2,false);" onkeypress="return blockNonNumbers(this, event, true, false);" /> </form>

Javascript

I’ve included the validate.js Javascript code, which you can download. The code contains two functions: blockNonNumbers and extractNumber. In the markup, we can link to the Javascript file in the head section of the page using the following markup.

<script language="javascript" src="validate.js"></script>

<script language="javascript" src="validate.js"></script>

All Together Now

Here’s the entire markup.

<!doctype html>
<html>
<head>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<form id="login" method="post" action=""> 
<input type="text" name="username" value="" 
 onblur="extractNumber(this,2,false);" 
 onkeyup="extractNumber(this,2,false);" 
 onkeypress="return blockNonNumbers(this, event, true, false);" />
</form>
</body>
</html>

<!doctype html> <html> <head> <script language="javascript" src="validate.js"></script> </head> <body> <form id="login" method="post" action=""> <input type="text" name="username" value="" onblur="extractNumber(this,2,false);" onkeyup="extractNumber(this,2,false);" onkeypress="return blockNonNumbers(this, event, true, false);" /> </form> </body> </html>

Demo

Filed Under: HTML, JS Tagged With: forms, numbers

Content delivered to your email

About Me

I'm Ulysses, a Cloud Engineer at Cardinal Health based in Columbus, Ohio. I’m a certified AWS Solutions Architect. This website is my way of documenting the things I have learned in the Cloud. When off the grid, I enjoy riding my electric skateboard. I have surfed, snowboarded and played the saxophone in the past. I hope you will find this site helpful. It's powered by WordPress and hosted in AWS LightSail.

  • Cloud
  • Linux
  • Git

Copyright © 2012–2021