Being a freelance software engineer and web developer I must able to learn many programming techniques and tricks to improve myself and become more confident enough to handle programming projects of my clients. One of the interesting scripting language that caught in my interest is the JavaScript. This scripting language used primarily for the client side as a tool for form validation to ensure that the user gives right value or select correct options before the information send to the server side.
JavaScript is used also for animations and timer in most web applications it can integrate in HTML,CSS,PHP,ASP.NET,ColdFusion,ASP,PERL,CGI and other web technologies with ease. At present time there are many JavaScript framework that is freely available over the Internet to name as few we have the very popular one JQuery, Node.Js, AngularJS that add functionality in our webpages and websites.
Let us go with our sample program this program will ask the user to enter five numbers and then it will return the sum of the five numbers. What is good about this program is that the user just press the enter key and the cursor will move to the next text field automatically without using the mouse to navigate through text field.
I hope you will find my work useful thank you very much.
Sample Output of Our Program
Program Listing
<html>
<style>
p.margin
{
margin-top:10px;
margin-bottom:35px;
margin-right:350px;
margin-left:335px;
}
</style>
<script>
// June 5, 2014 Thursday
// Written By: Mr. Jake Rodrgiuez Pomperada, MAED-IT
// Email Address : jakerpomperada@yahoo.com / jakerpomperada@gmail.com
// FaceBook Address: jakerpomperada@yahoo.com
// Product of the Philippines.
function enter_key(next_textfield) {
if(window.event && window.event.keyCode == 13) {
next_textfield.focus();
return false;
}
else
return true;
}
function add_all() {
var a = parseInt(document.getElementById("no1").value);
var b = parseInt(document.getElementById("no2").value);
var c = parseInt(document.getElementById("no3").value);
var d = parseInt(document.getElementById("no4").value);
var e = parseInt(document.getElementById("no5").value);
var total_sum = (a + b + c + d + e);
document.getElementById("test").innerHTML
= "<p class='margin'>The total sum is " +total_sum + ".</p>";
}
function clear_all()
{
document.getElementById("no1").value="";
document.getElementById("no2").value="";
document.getElementById("no3").value="";
document.getElementById("no4").value="";
document.getElementById("no5").value="";
document.getElementById("test").innerHTML = "";
document.getElementById("no1").focus();
}
</script>
<body bgcolor="yellow">
<font size="5" face="comic sans ms">
<br>
<h2> <center> Key Press Demonstration in Javascript
</center> </h2>
<form name="test">
<p class="margin">
Item No. 1: <input type="text" id="no1" name="field1"
onkeypress="return enter_key(document.test.field2)"><br>
Item No. 2 <input type="text" id="no2" name="field2"
onkeypress="return enter_key(document.test.field3)"><br>
Item No. 3 <input type="text" id="no3" name="field3"
onkeypress="return enter_key(document.test.field4)"><br>
Item No. 4 <input type="text" id="no4" name="field4"
onkeypress="return enter_key(document.test.field5)"><br>
Item No. 5 <input type="text" id="no5" name="field5"
onkeypress="return enter_key(document.test.send)"><br>
<br>
<input id="send" type="button" value="ADD SUM"
title="Click here to find the sum of numbers"
onclick="add_all();" />
<input id="clear" type="button" value="CLEAR"
title="Click here to clear the all the text field."
onclick="clear_all();" />
<p id="test"></p>
</font> </p>
</form>
</body>
</html>
