IT Job Careers: November 2013

Tuesday, November 19, 2013

JavaScript HTML Form Validation Example

JavaScript Form Validation With All HTML Form Objects Example

<html>
<head>
<script>
function check()
{
if(document.f1.unm.value=="") // document.getElementById('un').value;
{
alert("Username should not be left blank");
document.getElementById('un').focus(); // document.f1.unm.focus();
return false;
}
else
{
s=document.f1.unm.value;
for(i=0;i<s.length;i++)
{
chr=s.charCodeAt(i);
if(!(( chr>=65 && chr<=90 ) || ( chr>=97 && chr<=122 )))
{
alert("Username must contain only Alphabets");
document.f1.unm.value=""
document.getElementById('u').focus();
return false;
}
}
}
/* ---------------------------------------------------- */
if(document.f1.pwd.value=="")
{
alert("Password should not be left blank");
document.getElementById('pw').focus();
return false;
}
/* ---------------------------------------------------- */

if(document.getElementById('s0').checked!=true && document.getElementById('s1').checked!=true)
{
alert("Please select Gender");
return false;
}
/* ---------------------------------------------------- */
if(document.getElementById('c0').checked!=true && document.getElementById('c1').checked!=true)
{
alert("Please select Vehicle");
return false;
}
if(document.getElementById('c1').checked==true)
{
if(document.f1.cars.selectedIndex==0)
{
alert("Plz select your Car");
return false;
}
}
if(document.f1.cv.selectedIndex==-1)
{
alert("Plz select visited Country");
return false;
}
if(document.f1.ftrip.value=="")
{
alert("Plz Describe your favorite airplane trip");
document.f1.ftrip.value==""
document.getElementById('ft').focus();
return false;
}
s=document.f1.email.value;
at=s.indexOf('@');
atat=s.indexOf('@',at+1);
dot=s.indexOf('.');
len=s.length;
adj = s.charAt(at+1);

lchar = s.charAt(len-1);
if(s=="")
{
alert("Plz enter your Email id");
document.getElementById('em').focus();
return false;
}
else
{
if(at<1 || dot==-1 || atat!=-1 || (lchar==".") || (adj=="."))
{
alert("Plz enter valid Email");
document.f1.email.value=""
document.getElementById('em').focus();
return false;
}
}
if(document.f1.resume.value=="")
{
alert("Plz Upload your Resume");
document.f1.resume.value==""
document.getElementById('res').focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="a.php" name="f1" enctype="multipart/form-data" onReset="" onSubmit="return check();">
Username : <input type="text" name="unm" id="un"> <br>
Password : <input type="password" name="pwd" id="pw"> <br>
Gender: <input type=radio name=gd value=m id=s0>Male
<input type=radio name=gd value=f id=s1>Female<br>
Choose your vehicle :
<input type=checkbox name=interest id=c0>Bike
<input type=checkbox name=interest id=c1>Car
<br>
Choose your Car :
<select name="cars" id="cr">
<option value=""> Plz select </option>
<option value="Santro"> Santro</option>
<option value="Maruthi"> Maruthi</option>
<option value="Wagon-R"> Wagon-R</option>
</select>
<br>
Which Country you like to visit?<br>
<select multiple size=3 name=cv>
<option value=usa>America
<option value=europe>Europe
<option value=asia>Asia
<option value=australia>Australia
</select>
<br>
Describe your favorite Aeroplane trip:<br>
<textarea name=ftrip rows=5 cols=50 id=ft></textarea> <br>
E-mail : <input type=text name=email id=em> <br>
Resume : <input type=file name=resume id=res> <Br>
<input type="reset" name="clear" id="c" value="Reset" onClick="return confirm('Are u Sure to Clear?');">
<input type="submit" value="Continue">
</form>
</body>
</html>

Output:

JavaScript To Hide or Unhide any Object in Web Page Example

JavaScript To Hide or Unhide any Object in Web Page:

Example:

<script>
function check(n)
{
if(n==0)
{
document.getElementById('hbtn').style.display="none";
document.getElementById('sbtn').style.display="block";
document.getElementById('siframe').style.display="none";
}
else
{
document.getElementById('hbtn').style.display="block";
document.getElementById('sbtn').style.display="none";
document.getElementById('siframe').style.display="block";
}
}
</script>
<body>
<input type="button" value="Hide Iframe" id="hbtn" onClick="check(0)" />
<input type="button" value="Show Iframe" id="sbtn" style="display:none" onClick="check(1)" />
<hr/>
<iframe src="http://www.in.com" width="400" height="300" id="siframe" ></iframe>
<p>Welcome To www.itjobcareers.blogspot.com site.</p>
</body>

Output:

JavaScript To Display Error Message After the Form Object Example

JavaScript To Display Error Message After the Form Object:

Example:

<script>
function check()
{
if(document.getElementById('sid').value=="")
{
document.getElementById('stxt').innerHTML="* Enter any Search Key word";
document.getElementById('stxt').style.color="red";
document.getElementById('sid').style.backgroundColor="yellow";
}
else
alert("Searching Result...");
}
</script>
</head>
<body>
<input type="text" name="searchtxt" id="sid" /><span id="stxt">*Require</span>
<br/>
<input type="button" value="Search" onClick="check()" />

</body>

Output:
*Require

JavaScript To Set Password Strength By OnKey Event Example

JavaScript To Set Password Strength By OnKey Event:
<script>
function pwstrength(pwl)
{
if(pwl>0 && pwl<=5)
{
document.getElementById('pwspan').innerHTML="Very Weak";
document.getElementById('pwspan').style.color="yellow";
document.getElementById('pwspan').style.backgroundColor="red";
}
else if(pwl>=6 && pwl<=8)
{
document.getElementById('pwspan').innerHTML="Weak";
document.getElementById('pwspan').style.color="blue";
document.getElementById('pwspan').style.backgroundColor="pink";
}
else if(pwl>=9)
{
document.getElementById('pwspan').innerHTML="Strong";
document.getElementById('pwspan').style.color="orange";
document.getElementById('pwspan').style.backgroundColor="green";
}
else
{
document.getElementById('pwspan').innerHTML="* Required";
document.getElementById('pwspan').style.color="#CCF";
document.getElementById('pwspan').style.backgroundColor='';
}
}
</script>
<body>
Enter Password:
<input type="password" name="pwd" id="pw" onKeyUP="pwstrength(this.value.length)" />
<span id="pwspan" style="color:#CCF">*Required</span>
</body>

Output:
Enter Password: *Required

JavaScript OnKeyUp/OnKeyDown/OnKeyPress Event Example

JavaScript OnKeyUp/OnKeyDown/OnKeyPress Event: When we hit each key in keyboard a function called.

Example:


<html>
<head>
</head>
<body>
<form>
Enter Key: <input type="text" name="field1" id="f1" size="5"
onkeyup="if(this.value.length>=4)
document.getElementById('f2').focus();" /> -
<input type="text" name="field2" id="f2" size="5"
onkeyup="if(this.value.length>=4)
document.getElementById('f3').focus();" /> -
<input type="text" name="field3" id="f3" maxlength="4" size="5"/>
</form>
</body>
</html>

Output:

JavaScript InnerHTML Content For Overflow In DIv Tag

JavaScript InnerHTML Content For Overflow:

Example:

<script>
function add_text()
{
n=document.getElementById('un').value;
p=document.getElementById('list').innerHTML;
document.getElementById('list').innerHTML=n + "<br/>" + p;
document.getElementById('un').value="";
document.getElementById('un').focus();
}
</script>
<body>
<input type="text" name="unm" id="un"/>
<input type="button" name="Add" value="Add" onClick="add_text()" />
<hr/>
<div id="list" style="width:200px; height:100px; overflow:auto;">
</div>
</body>

Output:

JavaScript Onchange Event Example To Change Div Content

To Change Div Content: Through innerHTML we can change any div content by its tag id of the element.

Example:

<html>
<head>
<script>
function f1(str)
{
document.getElementById('d1').innerHTML=str+'<p>content....</p>';
document.getElementById('d1').style.color="green";
document.getElementById('d1').style.backgroundColor='pink';
document.getElementById('d1').style.border="double";
document.getElementById('d1').style.borderColor="blue";
}
</script>
</head>
<body>
<form>
<select name="cars" id="c" onChange="f1(this.value);">
<option value="">Select the Car</option>
<option value="Santro "> Santro </option>
<option value="Wagon-R"> Wagon-R</option>
<option value="Getz">Getz</option>
</select>
</form>
<div id="d1">Not Selected!</div>
</body>
</html>

Not Selected!

JavaScript OnChange Event Example

JavaScript OnChange Event: When we change option on the combo box/Drop Down List.

Example:

<body>
Open Site:
<select name="sites" onChange="document.getElementById('fm1').src=this.value;">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.sify.com">Sify</option>
</select>
<hr/>
<iframe src="http://www.google.com" width="600px" height="550" frameborder="1" name="frm1" id="fm1" ></iframe>
</body>

JavaScript OnMouseDown And OnMouseUp Event Example

JavaScript OnMouseDown And OnMouseUp Event

Example

<body>
<img src="images/Winter.jpg" width="300" height="250" onMouseDown="this.src='images/Water lilies.jpg';" onMouseUp="this.src='images/Winter.jpg';" />
<br>
<img src="images/Water lilies.jpg" width="300" height="250" onMouseOver="this.src='images/Winter.jpg';" onMouseOut="this.src='images/Water lilies.jpg';" />
<br>
<img src="images/Winter.jpg" width="300" height="250" onMouseDown="this.src='images/Blue hills.jpg';" onMouseUp="this.src='images/Winter.jpg';" onMouseOver="this.src='images/Water lilies.jpg';" onMouseOut="this.src='images/Winter.jpg';" />
</body>

JavaScript OnMouseOver And OnMouseOut Event Example

JavaScript OnMouseOver And OnMouseOut Event

Example:

<body>
<img src="images/flower1.gif" width="250" height="300" border="0" onMouseOver="this.src='images/Water lilies.jpg'; document.getElementById('p1').src='images/Blue hills.jpg';" onMouseOut="this.src='images/flower1.gif'; document.getElementById('p1').src='images/Sunset.jpg';" />

<br>
<img src="images/Sunset.jpg" id="p1" width="200" height="200" border="0" />
</body>

JavaScript OnBlur Event Example

JavaScript OnBlur Event: When control jumps from current object then onBlur event function called automatically.

Example:

<html>
<head>
<script>
function f1(len)
{
if(len<6)
{
document.getElementById('un').style.background="red";
alert("User name should be >6");
document.getElementById('un').value="";
document.getElementById('un').focus();
}
else
document.getElementById('un').style.backgroundColor='yellow';
}
</script>
</head>
<body>
<form>
User Name:
<input type="text" name="unm" id="un" onBlur="f1(this.value.length);"> <br>
Password:
<input type="password" name="pwd" id="pw" onBlur="if((this.value).length<6) { this.style.backgroundColor='red'; alert('Password should be grater then 6');}">
</form>
</body>
</html>

Output:

JavaScript OnFocus Event Example

JavaScript OnFocus Event: When Control Jumps on the current object then onFocus event function called automatically.

Example:

<html>
<head>
<script>
function f1(str)
{
document.getElementById(str).value ="";
document.getElementById(str).style.backgroundColor="yellow";
document.getElementById(str).style.color="green";
}
</script>
</head>

<body>
<form>
User Name:<input type="text" name="uname" id="un" placeholder="Enter User Name" onFocus="f1('un');">
<br>
Password: <input type="text" name="pwd" id="pw" placeholder="Enter Password" onFocus="f1('pw'); this.type='password';">
<input type="button" value="Show Password" onClick="document.getElementById('pw').type='text'" />
</form>
</body>
</html>

Output:

JavaScript DOM By ID Example For Standard Calculator

JavaScript Program For Standard Calculator:

<head>
<script>

function calc(k)
{
if(k=="+" || k=='-' || k=='*' || k=='/')
{
v1=parseInt(document.getElementById('res').value);
op=k;
document.getElementById('res').value="";
}
else if(k=="=")
{
v2=parseInt(document.getElementById('res').value);
document.getElementById('res').value="";
if(op=='+')
ans=(v1+v2);
else if(op=='-')
ans=(v1-v2);
else if(op=='*')
ans=(v1*v2);
else
ans=(v1/v2);
document.getElementById('res').value=ans;
}
else
{
no=document.getElementById('res').value;
if(no)
document.getElementById('res').value=no+k;
else
document.getElementById('res').value=k;
}
}
</script>
</head>

<body>
<form>
<input type="text" name="result" id="res" readonly > <br>
<input type="button" onClick="calc(1);" value="1">
<input type="button" onClick="calc(2);" value="2">
<input type="button" onClick="calc(3);" value="3">
<br/>
<input type="button" onClick="calc(4);" value="4">
<input type="button" onClick="calc(5);" value="5">
<input type="button" onClick="calc(6);" value="6">
<br/>
<input type="button" onClick="calc(7);" value="7">
<input type="button" onClick="calc(8);" value="8">
<input type="button" onClick="calc(9);" value="9">
<input type="button" onClick="calc(0);" value="0">
<br/>
<input type="button" onClick="calc('+');" value="+">
<input type="button" onClick="calc('-');" value="-">
<input type="button" onClick="calc('*');" value="*">
<input type="button" onClick="calc('/');" value="/">
<br/>
<input type="button" onClick="calc('=');" value="=">
<input type="reset" value="Clear">
</form>
</body>

Output:

JavaScript DOM By Id Example To Calculate Two Values

Example:
<head>
<script>

function calc(ch)
{
x=document.getElementById('v1').value;
x=parseFloat(x);
y=document.getElementById('v2').value;
y=parseFloat(y);
switch(ch)
{
case '+' : a=(x+y); break;
case '-' : a=x-y; break;
case '*' : a=x*y; break;
case '/' : a=x/y; break;
default: a="Invalid Input";
}
document.getElementById("result").value=a;
document.getElementById("result").style.color="green";
document.getElementById("result").style.backgroundColor="pink";
}

</script>
</head>

<body>
<form>
Enter Value1:
<input type="text" name="v1" id="v1"> <br>
Enter Value2:
<input type="text" name="v2" id="v2"> <br>

<input type="button" onClick="calc('+')" value="+">
<input type="button" onClick="calc('-')" value="-">
<input type="button" onClick="calc('*')" value="*">
<input type="button" onClick="calc('/')" value="/">
<input type="reset" value="Clear" />
<br/>
Result: <input type="text" name="res" id="result" readonly> <br>
</form>
</body>

Output:

JavaScript DOM getElementById Example1

JavaScript DOM Example by Id:

<head>
<script>
function get()
{
document.getElementById("un2").value=document.getElementById("un").value;
document.getElementById("un2").style.color="RED";
document.getElementById("un2").style.backgroundColor="yellow";
}
</script>
</head>
<body>
<input type="text" name="unm" id="un" />
<br />
<input type="button" value="Copy & Paste" onClick="get()" />
<br />
<input type="text" name="unm2" id="un2" readonly="readonly" />
</body>

Output:

Thursday, November 14, 2013

JavaScript Event Attribute Statements

Onclick : When we click on the current object.

Ondblclick: When we double click on the current object.

Onchange: When we change an option on the dropdown menu.

Onreset: To Clear Form Content for confirmation.

Onsubmit: To check form validation

Onfocus: When control enters on the current object.

Onblor: When controljumps on the current object.

Onload: When Web Page Loads.

Onmouseover: When mouse pointer enters on the current object.

Onmousemove: When mouse pointer moves on the current object.

Onmousedown: When mouse left click down on the current object.

Onmouseup: When mouse left click Up on the current object.

Onmouseout: When mouse pointer comes out on the current object

Onkeypress: When Keyboard Key press on the current object

Onkeyup: When Keyboard Key press up on the current object

Onkeydown: When Keyboard Key press down on the current object

JavaScript Auto Re-Direct To Open Other Page

JavaScript Auto Re-Direct:

Example:
<html>
<head>
<script>
window.location.href="http://www.helpmeboss.com"
</script>
</head>

<body>

</body>
</html>

Pages

Tuesday, November 19, 2013

Thursday, November 14, 2013

JavaScript Event Attribute Statements

JavaScript Auto Re-Direct: