Tuesday, February 28, 2012

A JavaScript endsWith function

The following JavaScript function checks whether a string ends with a specified string.
function endsWith(str, s){
 var reg = new RegExp (s + "$");
 return reg.test(str);
}
The first argument is a string to be checked, the second one is a suffix to find. It returns true if the string ends with a specified string, and returns false if it does not. We use a "$" anchor to match the end of the string. The function is case-sensitive. Example:
var str="teens";
alert(endsWith(str, "ns"));
If you want to make the function into a method that could be used by all variables of a string type, you could use an object's prototype property:
String.prototype.endsWith = function(s){
 var reg = new RegExp(s + "$");
 return reg.test(this);
}
Then, you would use the function as follows:
alert(str.endsWith("ns"));

A JavaScript startsWith function

The previous function used the "$" anchor to match the end of a string. To match the start of a string, JavaScript regular expressions use a "^" (caret) anchor. This information allows us to write a function that would match the beginning of a string:
function startsWith(str, s){
 var reg = new RegExp("^" + s);
 return reg.test(str);
}

Friday, February 24, 2012

A Script That Remembers Values Typed into a Text Box


HTTP cookies can be used both for server-side and client-side programming. There are many ways to use cookies in Javascript. In this short tutorial we will concentrate on the client-side. The task is to build a script that will remember values users type in a text box and display them next time the users access the page.
Let's say we have a form with an input box "project" and a submit button. We want to capture the values entered by the user and save them for later use. Cookies seem to be an ideal solution to this problem. No server-side programming or maintenance.
A working example is located here .
We'll need two functions to read and set cookies. They are pretty much standard and can be easily found on the web.
Let's start with a function that sets the cookie.
function setCookie (name, value, expires,
  path, domain, secure) {
     document.cookie =
      name + "="
      + escape(value)
      + ((expires) ? "; expires="
      + expires.toGMTString() : "")
      + ((path) ? "; path=" + path : "")
      + ((domain) ? "; domain=" + domain : "")
      + ((secure) ? "; secure" : "");
}
The parameters to the function are self-explanatory:






name is the cookie name we are going to use
value is the cookie's value
expires - a date that the cookie will expire.

The path sets the top level directory from which a cookie can be read.
Set the path of a cookie to the top-level directory of your Web pages, and the cookie is readable by all your Web pages.
To get a cookie value we'll use the following function:
 function getCookie(name) {
  // break cookie into array of bites
   var bites = document.cookie.split("; ");
    for (var i=0; i < bites.length; i++) {
     // break into name and value 
      nextbite = bites[i].split("=");
      // if name matches 
      if (nextbite[0] == name)
      // return value 
       return unescape(nextbite[1]);
    }
    return null;
 }
 
Let's write a function that would add values to the existing cookie. 2 arguments will be passed to the function: cookieName and formField.
First, let's get the value typed by the user:
Now, we'll set the expiry date to 30 days from today.:

Get the contents of the cookie using the getCookie function:
var contents= getCookie(cookieName);
Add the new value typed by the user to the existing cookie contents.
We chose to separate values by a period. You can use any other separators.
The last thing to do is to send the new cookie contents to our setCookie function:
Here is the full listing of the function:
function addString(cookieName, formField){
 var field = eval ("document.forms[0]."+ formField);
 var txtVal =field.value;
 var expires = new Date();
 expires.setDate(expires.getDate() + 30);
 var contents= getCookie(cookieName);
 if(contents != null && contents.indexOf(txtVal)<0)
  contents+="."+txtVal;
 else if(contents == null)
  contents = txtVal;

 setCookie(cookieName, contents, expires,"/");
}

We'll call this function from the onSubmit event of the form, like this:
<form onSubmit='addString ("example","txt1")'>
Now, the only thing to do is to write the contents of the cookie on the HTML page.
Here is the function that does it:
function writeCookieValues (val) {
 if(val!= null && val.length>0){
  var str = new String(val);
 //split the resulting array by a separator
 //used earlier in the addString function
 var aPr = str.split(".");
 for(var i=0; i < aPr.length; i++)
  document.write(aPr [i]+"<br>");
 }
}
Use it like this:
<script language='JavaScript'> writeCookieValues (getCookie("example")); </script>

A JavaScript Function that Allows Only Numbers

This little function will force users to type numbers, commas and periods only.
 function noAlpha(obj){
 reg = /[^0-9.,]/g;
 obj.value =  obj.value.replace(reg,"");
 }

reg = /[^0-9.,]/g is a regular expression that basically says: look for any numbers from 0 to 9, periods and commas globally.
Usage:
<input type=text onKeyUp='noAlpha(this)' onKeyPress='noAlpha(this)'>

Try it here.


Here is a version of this function that does not use regular expressions and allows numbers only.
function forceNumbers(obj) {
 if ( obj.value.length == 0)
  return;

 if (!parseInt(obj.value,10) && obj.value != 0)   {
  alert("Please enter a valid Number");
  obj.value = '';
  obj.focus();
  obj.select();
 }
 else {
  obj.value = '' + parseInt(obj.value,10);
 }
}