JavaScript Tutorials

Wednesday, September 29, 2010

Remove letters and symbols from a string using Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Removechar.aspx.cs" Inherits="Removechar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function Replace()
{
var txt=document.getElementById('txtString').value;
var len=txt.length;
var i=0;
for(i=0;i<len;i++)
{
var num=ascii_value (txt[i])
if(num<48 || num>57)
{
txt=txt.replace(txt[i],"");
len=txt.length;
i--;
}
}
alert(txt);
}
function ascii_value (c)
{
c = c.charAt(0);
var i;
for (i = 0; i < 256; ++ i)
{
var h = i . toString (16);
if (h . length == 1)
h = "0" + h;
h = "%" + h;
h = unescape (h);
if (h == c)
break;
}
return i;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtString" runat="server" />
<asp:Button ID="btnSubmit" runat="server" onclientclick="Replace()" Text="Submit" />
</div>
</form>
</body>
</html>

Friday, September 10, 2010

SSN Number with AutoTab

.aspx

<table border="0" cellpadding="0" id="HTMLTableSSN" runat="server" cellspacing="0" width="180">
<tr>
<td align="left" valign="middle" visible="False">
<asp:Label ID="lblSSN" runat="server" Font-Bold="True" Visible="False"></asp:Label>
</td>
<td runat="server" id="HTMLCellSSNError" valign="top" visible="False">
<asp:Label ID="lblShowSSNError" runat="server" Visible="False"></asp:Label>
</td>
<td align="left" style="width: 40px" valign="middle">
<asp:TextBox ID="txtFirstThree" runat="server" MaxLength="3" Width="25px"></asp:TextBox>
</td>
<td align="left" style="width: 10px" valign="middle">
<asp:Label ID="lblSSNDash1" runat="server" Font-Bold="true" Text="-"></asp:Label>
</td>
<td style="width: 40px" valign="middle">
<asp:TextBox ID="txtSecondTwo" runat="server" MaxLength="2" Width="25px"></asp:TextBox>
</td>
<td align="left" style="width: 10px" valign="middle">
<asp:Label ID="lblSSNDash2" runat="server" Font-Bold="true" Text="-"></asp:Label>
</td>
<td style="width: 80px" valign="middle">
<asp:TextBox ID="txtLastFour" runat="server" MaxLength="4" Width="50px"></asp:TextBox>
</td>
</tr>
</table>

.cs

protected void Page_PreRender(object sender, EventArgs e )
{
String s2 = "<script type='text/javascript'>" + Environment.NewLine
+ "function Tab(currentField, nextField)" + Environment.NewLine
+ "{" + Environment.NewLine
+ "// Determine if the current field's max length has been reached." + Environment.NewLine
+ "if (currentField.value.length == currentField.maxLength)" + Environment.NewLine
+ "{" + Environment.NewLine
+ " // Retreive the next field in the tab sequence, and give it the focus." + Environment.NewLine
+ " nextField.focus();" + Environment.NewLine
+ "}" + Environment.NewLine
+ "}" + Environment.NewLine
+ "</script>";

Page.RegisterClientScriptBlock("_AutoTab", s2);

txtFirstThree.Attributes.Add("onkeyup", "if (!(event.keyCode==9)){ Tab(document.getElementById('" + txtFirstThree.ClientID + "'), document.getElementById('" + txtSecondTwo.ClientID + "')); }");
txtSecondTwo.Attributes.Add("onkeyup", "if (!(event.keyCode==9)){ Tab(document.getElementById('" + txtSecondTwo.ClientID + "'), document.getElementById('" + txtLastFour.ClientID + "')); }");
}

Tuesday, August 31, 2010

Validating form input using JavaScript

Forms are widely used on the Internet. The form input is often being sent back to the server. But how can you be certain that a valid input was done by the user? With the help of JavaScript the form input can easily be checked before sending it over the Internet.

Here it goes Firstle lets not give chance to enter empty fields.

Validation for Blank fields

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script type="text/javascript">
function Verify(){
if(document.getElementById('uidTextBox').value.length==0)
alert("UserId can't be blank");
else if(document.getElementById('pwdTextBox').value.length==0)
alert("Password can't be blank");
else
{
alert("successfully logged in");
window.open("http://www.cooltuts.com/");
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<p><asp:TextBox ID="uidTextBox" runat="server" /></p>
<p><asp:TextBox ID="pwdTextBox" runat="server" /></p>
<p><asp:Button ID="btnSubmit" OnClientClick="Verify()" runat="server" Text="Button" /></p>
</div>
</form>
</body>
</html>

Email validation

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script type="text/javascript">
function Verify(){
if(document.getElementById('emailTextBox').value.length==0)
alert("Email can't be blank");
else if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.getElementById('emailTextBox').value))==false)
alert("Email Not in Correct Format");
else
{
alert("successfully logged in");
window.open("http://www.cooltuts.com/");
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<p><asp:TextBox ID="emailTextBox" runat="server" /></p>
<p><asp:Button ID="btnSubmit" OnClientClick="Verify()" runat="server" Text="Button" /></p>
</div>
</form>
</body>
</html>

Saturday, August 28, 2010

JavaScript Functions

Functions

We will use functions in most of our JavaScript programs. Therefore I will talk about this important concept already now. Basically functions are a way for bundling several commands together. Let’s write a script which outputs a certain text three times. Consider the following
approach:

<html>
<script language="JavaScript">


</script>
</html>

This will write out the text

Welcome to my homepage!
This is JavaScript!

three times. Look at the source code - writing the code three times brings out the right result.
But is this very efficiently? No, we can solve this better. How about this code which does the same:

<html>
<script language="JavaScript">

</script>
</html>

In this script we define a function. This is done through the lines:

function myFunction() {

document.write("Welcome to my homepage!<br>");

document.write("This is JavaScript!<br>");
}

The commands inside the {} belong to the function myFunction(). This means that our two do- cument.write() commands are bundled together and can be executed through a function call. In our example we have three function calls. You can see that we write myFunction() three times

just below the definition of the function. These are the three function calls. This means that the contents of the function is being executed three times. This is a very easy example of a function.
You might wonder why functions are so important. While reading this tutorial you will certainly realize the benefits of functions. Especially variable passing makes our scripts really flexible we will see what this is later on.

Functions can also be used in combination with event-handlers. Please consider this example:

<html>
<head>

<script language="JavaScript">

</script>

</head>
<body>

<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>

</body>
</html>

(The online version lets you test this script immediately)

The button calls the function calculation(). You can see that the function does certain calculations. For this we are using the variables x, y and result. We can define a variable with the keyword var. Variables can be used to store different values -like numbers, text strings etc. The line var result= x + y; tells the browser to create a variable result and store in it the result of x + y (i.e. 5 + 12). After this operation the variable result is 17. The command alert(result) is in this case the same as alert(17). This means we get a popup window with the number 17 in it.

Javascript Events

Events and event handlers are very important for JavaScript programming. Events are mostly caused by user actions. If the user clicks on a button a click-events occurs. If the mousepointer moves across a link a Mouseover-event occurs. There are several different events. we want our JavaScript program to react to certain events. This can be done with the help of event-handlers. A button might create a popup window when clicked. This means the window should pop up as a reaction to a Click-event. The event-handler we need to use is called onClick. This tells the computer what to do if this event occurs. The following code shows an easy example of the event-handler onClick:

<form>
<input type="button" value="click me" onClick="alert('Yo')">
</form>

There are a few new things in this code - so let’s take it step by step. You can see that we create a form with a button (this is basically a HTML-problem so I won’t cover it here). The new part is onClick="alert(’Yo’)" inside the <input> tag. As we already said this defines what happens when the button is pushed. So if a Click-event occurs the computer shall execute alert(’Yo’).
This is JavaScript-code (Please note that we do not use the <script> tag in this case). alert() lets you create popup windows. Inside the brackets you have to specify a string. In our case this is ’Yo’. This is the text which shall be shown in the popup window. So our script creates a window with the contents ’Yo’ when the user clicks on the button.
One thing might be a little bit confusing: In the document.write() command we used double quotes" and in combination with alert() we use only single quotes ’ -why? Basically you can use both. But in the last example we wrote onClick="alert(’Yo’)" - you can see that we used both double and single quotes. If we wrote onClick="alert("Yo")" the computer would get confused as it isn’t clear which part belongs to the onClick event-handler and which not. So you have to alternate with the quotes in this case. It doesn’t matter in which order you use the quotes - first double quotes and then single quotes or vice versa. This means you can also write onClick=’alert("Yo")’.

There are many different event-handlers you can use. We will get to know some during this tutorial- but not all. So please refer to a reference if you want to know what kind of other event-handlers do exist.

If you are using the Netscape Navigator the popup window will contain the text JavaScript alert. This is a security restriction. You can create a similar popup window with the prompt() method. This window accepts an input. A malicious script could imitate a system message and ask for a certain password. The text in the popup window shows that the window comes from your web browser and not from your operating system. As this is a security restriction you cannot remove this message.