Here is a quick overview of how to make number fields in your HTML form look more fancy using Bootstrap3 and jQuery. In particular I will show how to use Bootstrap markup to prepend a Bootstrap icon to one of the text input field on your form. Also I’ll show how to add a jQuery/JavaScript function to nicely format the numbers entered by your users.
In the end the example number fields will look a little something like the image shown here. If you want to try this for yourself, just browse a little further down in this article for a full working HTML example page.
Having nicely formatted number fields in your Web form is an example of how making things look much friendlier and professional, which is definitely a good thing!
Bootstrap3 Example:
For starters, adding a Bootstrap image to the front of your important text fields is a great idea. It calls attention to the field and gives the user an immediate idea what the field is all about. The code below shows a simple example of how to add a bootstrap (glyphicon) dollar sign to the front of a money related text field.
<div class="input-group"> <i class="input-group-addon glyphicon glyphicon-usd"></i> <input type="text" class="form-control" ID="addDollarSignHere" ext="100.00" /> </div>
I explained this code in an earlier article about how to format numbers on your Web page with commas, two decimal places, and with a preceeding dollar sign. You can take a look here if you are interested in seeing some more details.
Format user-Added text using jQuery:
At this point what we are missing is some formatting inside of the money related text form fields that displays readable content when the user enters form information. What you need in this case is a bit of javaScript that executes after the user has typed in their information and the field loses focus. You could also write code that updates the formatting as the user types in the number, but usually that just causes problems, and in my experience users do not want this. Having the functionality kick in when the user leaves the field is best.
Below is a small JavaScript/jQuery function example page that executes when the user has finished entering their data and focusses somewhere else in the form. When field focus is lost, the script cleans the user-entered text of non-numeric characters and formats the number to show in the two-decimal US currency style of $#,###.00
By the way, the code also shows a working example of the Bootstrap3 dollar glyphicon prepended to the input text fields.
Also, for added user-friendliness, this example uses the HTML5 placeholder tag inside the text input elements to guide the users in entering their data.
Here is the working example page:
<!DOCTYPE html>
<html>
<head runat="server">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>Test Page</title>
<script>
function toFinalNumberFormat(controlToCheck){
var enteredNumber = '' + controlToCheck.value;
enteredNumber = enteredNumber.replace(/[^0-9\.]+/g, ''); // remove any non-numeric, non-period character
controlToCheck.value = Number(enteredNumber).toLocaleString('en-US', { style: 'currency', currency: 'USD' }); // Number(enteredNumber).toLocaleString('en'); // enteredNumber.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
}
</script>
</head>
<body>
<table>
<!-- Row #1: Enter some Numeric Text Here -->
<tr>
<td>Enter your Number here </td><td> </td>
<td class="input-group"><i class="input-group-addon glyphicon glyphicon-usd"></i>
<input type="text" id="txtExampleBoxOne" class="form-control" onBlur="toFinalNumberFormat(this);" placeholder="$#,###.00" ></td>
</tr>
<!-- Row #2: Add some More Numeric Text -->
<tr>
<td>Enter another number </td><td> </td>
<td class="input-group"><i class="input-group-addon glyphicon glyphicon-usd"></i>
<input type="text" id="txtExampleBoxTwo" class="form-control" onBlur="toFinalNumberFormat(this);" placeholder="$#,###.00" ></td>
</tr>
</table>
</body>
</html>
Extending your Options with FontAwesome:
Installation and Using FontAwesome
But let’s say you want more icon flexibility than what’s offered in the default Bootstrap3 distribution. In that case I’d strongly suggest using FontAwesome (https://fortawesome.github.io). It is open source with lots of cool icons and it works well together with Bootstrap… and you can achieve the same field effects with the FontAwesome icon library as you can with the default Bootstrap icons library.
On your Web page you can either directly reference the FontAwesome library hosted online:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Or you can download the FontAwesome library for free and then include the FontAwesome library at the top of your Web page using:
<link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
Using the FontAwesome Icons
Now that you’ve got the library referenced, let’s take a look at using some of its icons for our form.
In the example above, you just need to separate the Bootstrap markup from the FontAwesome icon call by surrounding the ‘i‘ element with a span element. The span element holds the Bootstrap CSS while the ‘i‘ element renders the FontAwesome icon. Here’s an example of adding FontAwesome calendar icon to the start of one of your form text fields (similar to the pure Bootstrap code above):
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> <input type="text" class="form-control" ID="addACalendarDate" ext="2016-03-18" /> </div>
Keep an eye on your form elements though, since the FontAwesome addition to your text input area will be slightly wider than the default BootStrap addition if you use the fa-fw options. To get them exactly the same size, just leave out fa-fw.
Even easier is to add a FontAwesome icon to a Bootstrap button. Just have a look at how you might write a Save New button for your form:
<button type="button" class="btn btn-info" style="width:300px;" runat="server"> <i class="fa fa-plus-square-o"></i> Add New Information </button>
Justin Cooney 