Nov 28, 2015

How To Use AngularJS Expression And Variables

In AngularJS, Expressions Use To Bind Data Just Like "ng-bind". Its Simply Written Inside The Double Braces. These Expressions Are Same As JavaScript Expressions. You Can Use Variables, Operators And Literals.

 Lets Write Simple Expression To Output The Value Of "4 + 5".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <p>
        4 + 5 = {{ 4 + 5 }}
    </p>
</body>
</html>

If You See This In Browser You Will Get The Following Output.

4 + 5 = 9

 Lets See How We Can Use Variables In Expressions. In Order To Do That Lets Use "ng-init" To Initialize Few Variables. Normally You Don't Need To Do This. Because You Will Get Variables And Objects Through Controllers. These Variables Are Just Like JavaScript Variables. Now Lets See How We Can Create Variables. 

 This Is How We Create Numbers In AngularJS.

 
1
ng-init="Quantity=2;Price=100"

And This Is How We Create Strings In AngularJS.

 
1
ng-init="firstName='Nifal';lastName='Nizar'"

So Lets Use These In Our Expressions.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="FirstName='Nifal';LastName='Nizar';Quantity=2;Price=100">
        <span>Customer Name: {{ FirstName+ " " + LastName}}</span>
        <br />
        <span>Invoice Total: {{ Quantity * Price}}</span>
    </div>
</body>
</html>

If you view this in a browser you will get the below output.

 Customer Name: Nifal Nizar 
Invoice Total: 200

Hope You Had Good Knowledge About AngularJS Expressions And Variables.

 Check My Next Article About AngularJS Repeat And Filters.
By at No comments:
Labels: , , , , , ,

Writing XML With The XmlWriter In C#

In This Article Ill Explain About The XML Writer In C#. Lets See First How Our Xml Going To Be.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<Students>
   <Student>
      <FirstName>Nifal</FirstName>
      <LastName>Nizar</LastName>
      <Age>25</Age> 
   </Student>
   <Student>
      <FirstName>Dinesh</FirstName>
      <LastName>Selvachandra</LastName>
      <Age>24</Age>
   </Student>
</Students>

I Have Created A Simple Console Application.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
using System;

namespace XML_Writer
{
    class Program
    {
        static void Main(string[] args)
        {
            
        }
    }
}

In Order To Use "XmlWriter" We Need To Import The "System.Xml".
Lets Import And Start Using It.

 Now Create An Object Of "XmlWriter" Class With The File Location As You Wish To Keep The Xml File. Its Better To Keep The Keep The File Path In A Variable. Normally In Large Systems It Comes From "Web.Config" File.

 
1
2
string xmlPath = "D:\\Students.xml";
using (XmlWriter xmlWriter = XmlWriter.Create(xmlPath))

Now Lets Start The Code To Write. First You Should Call The "WriteStartDocument()" Method To Start Writing. 

 
1
xmlWriter.WriteStartDocument();

According To Our Above Xml We Have Parent Node Call "Students". Then In Side That We Have Two Student Nodes.

 To Create A Element Use The "WriteStartElement()" Method And Pass The String Parameter Into Which You Want To Be Your Element.

 
1
xmlWriter.WriteStartElement("Students");

To Create A Element String Use The "WriteElementString()" Method And Pass Two String Parameters Which Are Going To Be Your Element And Element Value.

 
1
xmlWriter.WriteElementString("FirstName", "Nifal");

When Your Writing Always Make Sure Your In The Correct Node Element And To Close All The Element Nodes. In Order To Close The Element Node Use The "WriteEndElement()" Method.

 
1
xmlWriter.WriteEndElement();

Finally Close The Document.

 
1
xmlWriter.WriteEndDocument();

Lets Have A Look On Full Code Now.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
using System;
using System.Xml;

namespace XML_Writer
{
  class Program
    {
      static void Main(string[] args)
      {
        string xmlPath = "D:\\Students.xml";
        using (XmlWriter xmlWriter = XmlWriter.Create(xmlPath))
        {
           xmlWriter.WriteStartDocument();

           xmlWriter.WriteStartElement("Students");

           xmlWriter.WriteStartElement("Student");
           xmlWriter.WriteElementString("FirstName", "Nifal");
           xmlWriter.WriteElementString("LastName", "Nizar");
           xmlWriter.WriteElementString("Age", "25");
           xmlWriter.WriteEndElement();

           xmlWriter.WriteStartElement("Student");
           xmlWriter.WriteElementString("FirstName", "Dinesh");
           xmlWriter.WriteElementString("LastName", "Selvachandra");
           xmlWriter.WriteElementString("Age", "24");
           xmlWriter.WriteEndElement();

           xmlWriter.WriteEndElement();

           xmlWriter.WriteEndDocument();
        }
      }
   }
}

Hope You Enjoyed It.




By at No comments:
Labels: , , , ,

My First AngularJS Application

AngularJS is a JavaScript Library which helps us to create a single page application very easily using data binding technology. To start learning Angular, you should have good knowledge about JavaScript and JQuery. One thing you need to understand is this is not an alternative for JQuery or anything. It is another data binding framework such as KnockoutJS. 

 First of all to start download the AngularJS Library from their website or else you can reference to the online library which is shown below. But make sure you always reference to a latest stable version of it.

 
1
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Initially to start first take a simple idea about following AngularJS directives.  
  • ng-app : This defines the AngularJS application.
  • ng-model : This binds the value of HTML control to the AngularJS application data.
  • ng-bind : This binds the AngularJS application data to the HTML controls.
Lets Start Developing Our Simple AngularJS Application. In This Application Ill Have A Text Field To Enter The Name. The Text Which I Enters Will Come With "Hello ". 

1
2
3
4
5
6
7
8
9
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    Name: <input type="text">
    <br/>
  </body>
</html>

Now I Should Tell Angular To Treat This Page As An Angular Application. In-order To That Use The "ng-app" Directive. As We Are In The Begining Of The Application I Will Define It In My <Body> Tag.

If You Want Give An Application Name To It. But It's Not Important Right Now. Because We Wont Be Doing All Controllers And Stuff In This Article. If You Want Make It Like HTML5 Attribute. 
Use Any Of The Following Ways To Define You Application.

1
<body ng-app>


1
<body ng-app="">


1
<body data-ng-app="">

Now Lets Define A Model For The Name.

1
Name: <input type="text" ng-model="name">

You Can Use Any Name For The Model. But In The Application You Have To Use The Same Model Name. So Give A Meaningful Name.Lets Bind The Data To A Tag.

1
<span ng-bind="name"></span>

Lets See The Full Code Now.
Name:

Now Run And Happy.
Hope You Had Good Start With AngularJS.

 Check My Next Article Regarding AngularJS Expressions And Variables.


By at No comments:
Labels: , , , ,

Oct 17, 2015

Getting The Direction Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the direction.

 Have a look on the code. It's simply created using Html and JavaScript.

 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
    <title>Getting The Direction Between Two Markers In Google Map Using Google MAP API</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div id="map-canvas" style="height: 75%;"></div>
    <div>
        <strong>From Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="fromLat" />
        <span>Longitude : </span>
        <input type="text" id="fromLng" />
        <br /><br />
        
        <strong>To Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="toLat" />
        <span>Longitude : </span>
        <input type="text" id="toLng" />
        <br /><br />

        <div id="direction"></div>
    </div>
    <script type="text/javascript">
        var map;
        var fromLat = 6.928940573589038;
        var fromLng = 79.87219331750487;
        var toLat = 6.929110981212029;
        var toLng = 79.87013338098143;

        var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
        var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

        loadMap();
        setFromMarker();
        setToMarker();

        function loadMap() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(fromLat, fromLng),
                zoom: 15
            });
        }

        function setFromMarker() {
            var fromMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(fromLat, fromLng),
                icon: fromIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(fromMarker, 'dragend', function (event) {
                fromLat = event.latLng.lat();
                fromLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setToMarker() {
            var toMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(toLat, toLng),
                icon: toIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(toMarker, 'dragend', function (event) {
                toLat = event.latLng.lat();
                toLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setLatLngDetails() {
            $("#fromLat").val(fromLat);
            $("#fromLng").val(fromLng);
            $("#toLat").val(toLat);
            $("#toLng").val(toLng);
            getDirection();
        }

        function getDirection() {
            var fromLocation = new google.maps.LatLng(fromLat, fromLng);
            var toLocation = new google.maps.LatLng(toLat, toLng);
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [fromLocation],
                destinations: [toLocation],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, callback_direction);
        }

        function callback_direction(response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                alert('Error was: ' + status);
            } else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;
                var str = '';

                for (var i = 0; i < origins.length; i++) {
                    var results = response.rows[i].elements;
                    if (results[0].status != 'ZERO_RESULTS') {
                        for (var j = 0; j < results.length; j++) {
                            str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                        }
                    } else {
                        str = 'No Direction Found.';
                    }
                }

                $("#direction").html(str);
            }
        }
   
    </script>
</body>
</html>

When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.
  • google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
  • google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
  • google.maps.TravelMode.TRANSIT requests directions via public transit routes.
  • google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.


Check My Other Articles About Google Maps.

 1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

By at No comments:
Labels: , , , , , , , , , , , ,

Getting The Direction Between Two Locations Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting four text fields to enter the from locations and to locations latitude and longitude. You can enter the locations latitude and longitudes of from and to locations and click the "Get Direction" button. After clicking the button you will get the direction.

Have a look on the code. It's simply created using Html and JavaScript.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
 <head>
  <title>Getting The Direction Between Two Locations Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <input type="button" value="Get Direction" onclick="getDirection()"/>
   <br/><br/>
   <div id="direction"></div>
  </div>
  
  <script type="text/javascript">

      function getDirection() {
          var fromLocation = new google.maps.LatLng($("#fromLat").val(), $("#fromLng").val());
          var toLocation = new google.maps.LatLng($("#toLat").val(), $("#toLng").val());
          var service = new google.maps.DistanceMatrixService();
          service.getDistanceMatrix({
              origins: [fromLocation],
              destinations: [toLocation],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
          }, callback_direction);
      }

      function callback_direction(response, status) {
          if (status != google.maps.DistanceMatrixStatus.OK) {
              alert('Error was: ' + status);
          } else {
              var origins = response.originAddresses;
              var destinations = response.destinationAddresses;
              var str = '';

              for (var i = 0; i < origins.length; i++) {
                  var results = response.rows[i].elements;
                  if (results[0].status != 'ZERO_RESULTS') {
                      for (var j = 0; j < results.length; j++) {
                          str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                      }
                  } else {
                      str = 'No Direction Found.';
                  }
              }

              $("#direction").html(str);
          }
      }
  </script>
 </body>
</html>

Just check the code in browser, you will get the following output.
When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.
  • google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
  • google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
  • google.maps.TravelMode.TRANSIT requests directions via public transit routes.
  • google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.


Check My Other Articles About Google Maps.

 1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

By at No comments:
Labels: , , , , , , , , , ,

Getting The Distance Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the distance between two locations. Please note that, this is not the direction distance. That mean if you select two locations you will get distance, which is going to very less than the travel distance. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the distance.

Have a look on the code. It's simply created using Html and JavaScript.

 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
<html>
 <head>
  <title>Getting The Distance Between Two Markers In Google Map Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div id="map-canvas" style="height:75%;"></div>
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <strong>Distance : </strong>
   <span id="distance">0.00</span>
   <span> meters</span>
  </div>
  <script type="text/javascript">
      var map;
      var fromLat = 6.928940573589038;
      var fromLng = 79.87219331750487;
      var toLat = 6.929110981212029;
      var toLng = 79.87013338098143;

      var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
      var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

      loadMap();
      setFromMarker();
      setToMarker();

      function loadMap() {
          map = new google.maps.Map(document.getElementById('map-canvas'), {
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(fromLat, fromLng),
              zoom: 15
          });
      }

      function setFromMarker() {
          var fromMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(fromLat, fromLng),
              icon: fromIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(fromMarker, 'dragend', function (event) {
              fromLat = event.latLng.lat();
              fromLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setToMarker() {
          var toMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(toLat, toLng),
              icon: toIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(toMarker, 'dragend', function (event) {
              toLat = event.latLng.lat();
              toLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setLatLngDetails() {
          $("#fromLat").val(fromLat);
          $("#fromLng").val(fromLng);
          $("#toLat").val(toLat);
          $("#toLng").val(toLng);
          getDistance();
      }

      function getDistance() {
          var fromLocation = new google.maps.LatLng(fromLat, fromLng);
          var toLocation = new google.maps.LatLng(toLat, toLng);

          var distance = google.maps.geometry.spherical.computeDistanceBetween(fromLocation, toLocation).toFixed(2);
          $("#distance").html(distance);
      }
   
  </script>
 </body>
</html>

Simply copy and paste the above codes in a text editor and it in a browser. You will get the below outputs.


If you carefully read the above code, you will know that I have initialized the from and to locations. If you want to make this code more efficient way, where you want to get the user location as default location. Click Here to check the article. 

 Check My Other Articles About Google Maps.

 1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

By at No comments:
Labels: , , , , , , ,

Restrict To Enter Only Decimal Using Java Script

In this article I'm going to show guys, how to restrict a text field only to enter decimal values. And most importantly you can tell the function how many decimal places you want to restrict.

Have a look on the code. It's simply created using Html and JavaScript.

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<body>
    <label>One Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,1)" />
    <br />

    <label>Two Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,2)" />
    <br />

    <label>Five Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,5)" />
</body>
<script type="text/javascript">
    function restrictToDecimal(el, evt, dec) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split('.');
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        //Restrict To Enter One Period
        if (number.length > 1 && charCode == 46) {
            return false;
        }

        //Getting The Character Position Entered
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
            return false;
        }

        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }
</script>
</html>

If you want use following single JavaScript to do it.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function restrictToDecimal(el, evt, dec) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    //Restrict To Enter One Period
    if (number.length > 1 && charCode == 46) {
        return false;
    }

    //Getting The Character Position Entered
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
        return false;
    }

    return true;

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

}

By at No comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)

JWT Token Decode Using Jquery

When it come to authentication we use many mechanism. Ones the user authenticated we must keep these details somewhere safe. So we can share...