Uly.me

cloud engineer

forms

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>

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>

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>

Demo

Unsaved Changes On Forms

If you try to abandon a form, you’ll be reminded that you’ve made changes. In addition, a pop up message will come up, asking you whether to stay on the page or to abandon it. This feature is made possible using a Javascript function. This short article will show how to alert users if they made changes to a form, prior to canceling or going to another link.

The Form

In this example, I created a simple form with one input called “username.” I’ve added “onchange=’needToConfirm=True'” to monitor the input field. I also added a save and cancel button, as well as an internal link for testing the form later. The save button calls the “needToConfirm” function when the save button is clicked. The cancel button simply reloads the same page when the cancel button is clicked. Here’s the HTML markup.

<form id="login" method="post" action="">
<input type="text" name="username" size="40" value="" onchange="needToConfirm=true" /><br>
<input type="Submit" name="save" value="Save" onclick="needToConfirm=false;" />
<input type="button" value="Cancel" onclick="window.location='confirm.html'" />
<a href="confirm.html">Link</a>

Javascript

The unsaved changes feature is made possible using Javascript. The function starts out setting needToConfirm to false. A pop up window comes up notifying the user that they have unsaved changes on the form. The user is prompted whether to stay on the page or to leave the page. Add the following Javascript code at the end of the form. Go ahead, test the demo below.

<script>
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm() 
{
 if (needToConfirm) 
 {
 return "You have unsaved changes.";
 }       
}
</script>

Demo

Bring Focus To Forms

When you visit Google.com, the cursor jumps to the searchbox, ready for users to submit a search. Bringing the cursor to the form is called form focus. This is made possible using a simple Javascript. You can set certain elements of the form to focus, when a page is loaded. This is particularly helpful for pages with minimal content, where the intent of the web developer, is to get users to enter data quickly. A login page is a perfect example of such a page. This article will show you how to bring focus on your forms using a simple Javascript.

HTML Form

Let’s create a simple form with two fields called username and password. The goal is to bring the cursor to the “username” field when the page is loaded. First, we assign an “id” and “name” to the form. Let’s call it “login” for lack of a better name. Next, we need to assign an “id” and “tabindex” to each input. We will use “id=’username'” and “tabindex=’1′” for the first input, and “id=’password'” and “tabindex=’2′” to the second input. See the example below.

<form id="login" name="login" method="post" action="">
<label for="username">Username: </label>
<input id="username" tabindex="1" type="text" name="username"/><br/>
<label for="password">Password: </label>
<input id="password" tabindex="2" type="password" name="password" /><br/>
<input type="submit" name="submit"/>
</form>

Javascript

We can then add a simple Javascript to the end of our form. This code will bring focus, or move the cursor, to a form called “login”, and to a field called “username.” That is it. Simple enough. This is how we bring focus to a form. Check out the demo below to see the result.

<script type=”text/javascript” language=”JavaScript”>
document.login.username.focus();
</script>

Demo

Remove Commas From Forms

This article will show you how to remove commas, semicolons, or any character, from a form. This tidy PHP script is quite useful when filtering out unwanted characters submitted in a form. This is important when the data is collected and exported later to a CSV (comma-delimited values) file. CSV files use commas and semicolons to separate data values. Having commas and semicolons in your data creates confusion and unwanted results. This neat PHP script removes commas and semicolons, and replaces them with a blank value.

HTML Form

First, the HTML form. This is just a HTML form with one field and a submit button. The form calls itself when submitted since the “action” field is left blank.

<form method="post" action="">
<input name="field"/>
<input name="submit" type="submit"/>
</form>

PHP

Now, the fun part. I came up with a list of characters that I want filtered out. In this example, I want to filter out commas and semicolons only. The unwanted characters are placed in an array. I cleaned up the input data using a PHP function called str_replace(). This PHP function replaces commas and semicolons with blanks. Finally, the results are assigned to a variable called $clean and echoed to the screen.

$list = array(",", ";");
$clean = str_replace($list, "", $_POST['field']);
echo $clean;

PHP Function

Taking one more step. I made the code modular by creating a function called clean_input(). I can then invoke the function numerous times on my script without repeating code. I simply call the clean_input() function when I need it. The function uses the same code above with some slight modification. We are passing the $in variable to the function. This is going to be in input field on our form. The clean_input function replaces it, and the results are returned.

function clean_input($in) {
  $list = array(",", ";");
  $clean = str_replace($list, "", $in);
  return $clean;
}
$output = clean_input($_POST['field']);
echo $output;

All Together Now

Finally, we can put all the pieces together in a single file called form.php. The input value in the form will be echoed after submission. Commas and semicolons are filtered out by our PHP function. We can test the function in the demo below. Just type any value to our input field. If you type a comma or semicolon, the input is replaced with a blank.

<form method="post" action="">
<input name="field"/>
<input name="submit" type="submit"/>
</form>
 
<?php
function clean_input($in) {
  $list = array(",", ";");
  $clean = str_replace($list, "", $in);
  return $clean;
}
 
$output = clean_input($_POST['field']);
echo $output;
 
/* end of file */

Demo