If you like my work please send me an email at jakerpomperada@gmail.com andjakerpomperada@yahoo.com.
People here in the Philippines who wish to contact me can call and text me in this number 09173084360.
Thank you very much and God Bless.
Sample Program Output
Program Listing
<!-- Product of Two Numbers Using JQuery -->
<!-- April 10, 2015 Friday --->
<!-- Written By: Mr. Jake R. Pomperada, MAED-IT -->
<!-- Tools : HTML,CSS and JQuery -->
<html>
<head>
<title>
Product of Two Numbers Using JQuery
</title>
</head>
<style>
body {
font-size:20px;
font-family:arial;
color:blue;
}
label{
display: table-cell;
text-align: justify;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body style='background-color:lightgreen'>
<div style='width:1100px;margin:auto'>
<br> <h1 align="center">Product of Two Numbers in JQuery</h2>
<font face="arial" size='5'>
<div class="row"><label> Enter First Value </label>
<input style="font-size:20px; font-family:arial; color:magenta" type="text" name="val1"
id="val1" autofocus maxlength="10" size="5"> </div>
<div class="row"><label> Enter Second Value </label>
<input style="font-size:20px; font-family:arial; color:magenta" type="text" name="val2"
id="val2" autofocus maxlength="10" size="5"> </div>
</font><br>
<br> <input id="button1" type="button" name="button"
title="Click here to find the product of two numbers." value="Find Product">
<input id="button2" type="button" name="button"
title="Click here to clear the text boxes." value="Clear">
<br><br><br>
<div id="display" style="height: 50px; width: 100%;"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
a =document.getElementById("val1").value;
b =document.getElementById("val2").value;
product = a*b;
message = "The product of " + a + " and " + b + " is " + product + ".";
display.innerHTML= message;
});
$('#button2').click(function(){
document.getElementById("val1").value="";
document.getElementById("val2").value="";
display.innerHTML="";
document.getElementById("val1").focus();
});
});
</script>
</body>
</html>
|
Friday, April 10, 2015
Product of Two Numbers Using Jquery
A simple program that I wrote using JQuery that will find the product of two numbers given by our user. The code is very easy to understand and use you will learn how to use button which interacts with JQuery.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment