CLOSE
jQuery

0 3117

jquery_bumper.sh-600x600
Today I decided to revisit how to best allow only numerics in a text field.  In the past, I have done this on the keydown event and matched against the key to see if that key that was pressed was allowed in the field.  This can then stop any unwanted keys from being allowed into the field.  Usually, it becomes a little bit of a headache because you do want to allow the user to use backspace, delete, arrows, decimal, hyphen, etc…  Then there is checking to make sure the hyphen can only be at the beginning and only allowing 1 decimal point, etc.  It can get to become quite the headache with all of the different things to look for.

I found a post on Stackoverflow and I was intrigued by one of the solutions using the keyup approach, test the data, and then remove any non numerics from it. There was some pretty nifty regex on there, but a lot of them still seemed to have problems allowing more than 1 decimal and the such. Someone had mentioned about just using jQuery.isNumeric(). I decided to write an example of how this could be done using the jQuery function.

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

This will force the field to only contain numeric values. The one down side of doing it this way is that you see the non numeric char quickly appear and disappear. This is a great solution as long as that does not bother you.

Here is an example fiddle where you can see it in action.

3 8914

Today I got to write a jQuery plugin that styles a select with hierarchical data. The markup would normally look like this in HTML:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

You can see the result of this over at w3schools

This looks cool, but what if you want to allow the user to select the optgroup telling the back end script to grab that level and all under it? I whipped up a quick plugin which works off of data attributes to describe the hierarchy. Here is what the structure of the html looks like:

<select id="hierarchySelect" class="form-control">
    <option data-isparent="true"  data-level="1">Main Dept 1</option>
    <option data-isparent="false" data-level="2">Sub 01</option>
    <option data-isparent="false" data-level="2">Sub 02</option>
    <option data-isparent="true"  data-level="2">Sub 03</option>
    <option data-isparent="false" data-level="3">Sub of Sub</option>
    <option data-isparent="true"  data-level="1">Main Dept 2</option>
    <option data-isparent="false" data-level="2">Sub 01</option>
    <option data-isparent="false" data-level="2">Sub 02</option>
    <option data-isparent="false" data-level="2">Sub 03</option>
</select>

The data-isparent should be flagged as true when there are child options under it. The plugin assumes that the options are already in the correct order. The data-level describes how many levels deep the option is. This assists in the indentation of the option. The default indentation is 25px, but can be overridden in the options of the plugin.

$("#hierarchySelect").selectHierarchy();

Here is a working fiddle that can be used to see the plugin in action.

Here is a link to Download the plugin. I want to build in some additional options and push it out to github when I have a chance. I will update this post when that happens. In the mean time, feel free to use it however you would like.

© Paul Zepernick