In this article I would like to share with you my sample program that uses JQuery to perform basic mathematical operations like addition, subtraction, division and multiplication using forms and keyup action in JQuery. The code is very easy to understand and use that will enable the learner to appreciate the benefits of using JQuery as Javascript framework in developing web applications.
If you have some questions about programming, about my work please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com. People here in the Philippines can contact me at my mobile number 09173084360.
Thank you very much and Happy Programming.
Sample Program Output
Program Listing
<!-- index.htm -->
<!-- September 11, 2015 Friday -->
<!-- Written By: Mr. Jake R. Pomperada, MAED-IT -->
<!-- jakerpomperada@yahoo.com and jakerpomperada@gmail.com -->
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<head>
<title>Basic Math Operations in JQuery</title>
<style type="text/css">
.form-style-3{
margin: auto;
width: 60%;
padding: 10px;
max-width: 420px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: red;
font-weight: bold;
font-size: 16px;
}
.form-style-3 label{
display:block;
margin-bottom: 10px;
}
.form-style-3 label > span{
float: left;
width: 180px;
color: blue;
font-weight: bold;
font-size: 15px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset{
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
margin: 0px 0px 0px 0px;
border: 5px solid red;
padding: 20px;
background: lightgreen;
box-shadow: inset 0px 0px 15px black;
-moz-box-shadow: inset 0px 0px 15px black;
-webkit-box-shadow: inset 0px 0px 15px black;
}
.form-style-3 fieldset legend{
color: blue;
border-top: 2px solid red;
border-left: 2px solid red;
border-right: 2px solid red;
border-radius: 6px 6px 0px 0px blue;
-webkit-border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
background: yellow;
padding: 0px 12px 3px 12px;
box-shadow: -0px -1px 2px black;
-moz-box-shadow:-0px -1px 2px black;
-webkit-box-shadow:-0px -1px 2px black;
font-weight: bold;
font-size: 18px;
}
.form-style-3 textarea{
width:320px;
height:100px;
}
.form-style-3 input[type=text],
.form-style-3 input[type=date],
.form-style-3 input[type=datetime],
.form-style-3 input[type=number],
.form-style-3 input[type=search],
.form-style-3 input[type=time],
.form-style-3 input[type=url],
.form-style-3 input[type=email],
.form-style-3 select,
.form-style-3 textarea{
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 2px solid blue;
outline: none;
color: blue;
padding: 5px 8px 5px 8px;
box-shadow: inset 1px 1px 4px black;
-moz-box-shadow: inset 1px 1px 4px black;
-webkit-box-shadow: inset 1px 1px 4px black;
background: yellow;
width:30%;
font-weight: bold;
font-size: 15px;
}
</style></head>
<body>
<div class="form-style-3">
<form>
<br><br>
<fieldset><legend>BASIC MATH OPERATIONS IN JQUERY</legend><br>
<label for="field1"><span>Enter 1st Digit Value<span class="required"></span></span>
<input type="text" name="value1" class="toCalculate" id="value1" class="input-field" name="field1" autofocus /> </label>
<label for="field1"><span>Enter 2nd Digit Value<span class="required"></span></span>
<input type="text" name="value2" class="toCalculate" id="value2" class="input-field" name="field1" /> <label>
<br> DISPLAY RESULTS <br><br>
<label for="field1"><span> The Sum is <span class="required"></span></span>
<input type="text" name="sum" class="sum" readonly></label>
<label for="field1"><span> The Difference is <span class="required"></span></span>
<input type="text" name="diff" class="diff" readonly></label>
<label for="field1"><span> The Product is <span class="required"></span></span>
<input type="text" name="product" class="product" readonly/> </label>
<label for="field1"><span> The Quotient is <span class="required"></span></span>
<input type="text" name="quotient" class="quotient" readonly/> </label>
<br>
<center>
Created By <br><br>
<font color="blue">
Mr. Jake R. Pomperada, MAED-IT
</font> </center>
</fieldset>
</form>
</div>
<script>
$('.toCalculate').keyup(getSum);
$('.toCalculate').keyup(getDiff);
$('.toCalculate').keyup(getProduct);
$('.toCalculate').keyup(getQuotient);
function getSum(){
var num1=1*$('#value1').val() || 0;
var num2=1*$('#value2').val() || 0;
$('.sum').val( num1+num2);
}
function getDiff(){
var num1=1*$('#value1').val() || 0;
var num2=1*$('#value2').val() || 0;
$('.diff').val( num1-num2);
}
function getProduct(){
var num1=1*$('#value1').val() || 0;
var num2=1*$('#value2').val() || 0;
$('.product').val( num1*num2);
}
function getQuotient(){
var num1=1*$('#value1').val() || 0;
var num2=1*$('#value2').val() || 0;
$('.quotient').val( num1/num2);
}
</script>
</body>
</html>
