Java Script Programs Using Form Example2

Example Program using Radio Button
<html>
<body>
<center><h1 style="color:red;"> Aritmetic operators Using Radio Button</h1></center>
<form name="form1">
<table border="1" align="center">
<tr>
<td> Enter First Number</td>
<td><input type="text" id="txt1" ></td>
</tr>
<tr>
<td> Enter Second Number</td>
<td><input type="text" id="txt2" ></td>
</tr>
<tr>
<td> <p id="demo1"></p></td>
<td> <p id="demo2"></p></td>
</tr>
<tr> <td colspan="2">
<input type="radio" name=button1 checked>+
<input type="radio" name=button2 >-
<input type="radio" name=button3 >*
<input type="radio" name=button4 >/
<input type="radio" name=button5 >%
<INPUT type="button" value="GET RESULT" onClick='checkButton()'>
</td>
</tr>
<table>
</form>
<script language="JavaScript">
function checkButton()
{
var x = document.getElementById("txt1").value;
var y = document.getElementById("txt2").value;
if(document.form1.button1.checked == true)
{
c=parseInt(x)+parseInt(y);
document.getElementById("demo1").innerHTML = "Sum";
document.form1.button1.checked =false;
}
else if(document.form1.button2.checked == true)
{
c=parseInt(x)-parseInt(y);
document.getElementById("demo1").innerHTML = "Difference";
}
{
c=parseInt(x)*parseInt(y);
document.getElementById("demo1").innerHTML = "Product";
}
{
c=parseInt(x)/parseInt(y);
document.getElementById("demo1").innerHTML = "Quotient";
}
{
c=parseInt(x)%parseInt(y);
document.getElementById("demo1").innerHTML = "Remainter";
}
document.getElementById("demo2").innerHTML = c;
}
</script>
Example Program using combo Box
<html>
<body>
<marquee behavior="alternate" scrollamount="10">
<h1 style="color:MediumSeaGreen;" >Demonstration of Combo Box Control</h1>
</marquee>
<table border="1" align="center" bgcolor="pink">
<tr>
<td >Enter the item to Add</td>
<td><input type="text" id="txtItem" style="background-color:yellow;"></td>
<td><input type="button" value="Add" onclick="insertItem()" style="width:60px;background-
color:violet"></td>
<td rowspan="5" style="vertical-align: top;width:100px">
<select id="MyList" name="demo" style="width:100px;" >
</select>
</td>
<tr>
<td>Selected Item</td>
<td><p id="sel"></p></td>
<td><input type="button" value="Select" onclick="Getselect()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td>Selected Index</td>
<td><p id="ind"></p></td>
<td><input type="button" value="Index" onclick="GetIndex()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td>Number Items</td>
<td><p id="count"></p></td>
<td><input type="button" value="count" onclick="GetCount()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td>Search Item</td>
<td><p id="ser"></p></td>
<td><input type="button" value="Search" onclick="search()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="Delete" onclick="remove()" style="width:60px;background-
color:Violet">
<input type="button" value="Clear" onclick="removeAll()" style="width:60px;background-
color:Violet">
</td>
</tr>
</table>
<script language="javascript">
function insertItem()
{
var x = document.getElementById("MyList");
var item = document.getElementById("txtItem").value;
var option = document.createElement("option");
option.text = item.trim();
x.add(option);
document.getElementById("txtItem").value=" ";
}
function Getselect()
{
if (x.selectedIndex >= 0)
{
var val =x[ x.selectedIndex].value;
document.getElementById("sel").innerHTML =val;
}
}
function GetIndex()
{
{
var val = x.selectedIndex;
document.getElementById("ind").innerHTML =val;
}
}
function remove()
{
{
x.options.remove(val);
}
}
function GetCount()
{
var val = x.options.length;
document.getElementById("count").innerHTML =val;
}
function removeAll()
{
x.innerHTML = " ";
}
function search()
{
var howMany = x.options.length;
var item = document.getElementById("txtItem").value.trim();
var f=0
for(var i=0;i<howMany;i++)
{
var val = x[i].value;
if(item==val)
{
document.getElementById("ser").innerHTML =val;
f=1;
break;
}
}
if(f==0)
document.getElementById("ser").innerHTML ="Not Found";
}
</script>
</body>
</html>
Example program to ListBox
<html>
<body>
<marquee behavior="alternate" scrollamount="50">
<h1 style="color:MediumSeaGreen;" >Demonstration of List Box Control</h1>
</marquee>
<table border="1" align="center" bgcolor="pink">
<tr>
<td >Enter the item to Add</td>
<td><input type="text" id="txtItem" style="background-color:yellow;"></td>
<td><input type="button" value="Add" onclick="insertItem()" style="width:60px;background-
color:violet"></td>
<td rowspan="5">
<select id="MyList" size="8" style="width:100px;">
</select>
</td>
<tr>
<td>Selected Item</td>
<td><p id="sel"></p></td>
<td><input type="button" value="Select" onclick="Getselect()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td>Selected Index</td>
<td><p id="ind"></p></td>
<td><input type="button" value="Index" onclick="GetIndex()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td>Number Items</td>
<td><p id="count"></p></td>
<td><input type="button" value="count" onclick="GetCount()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<td>Search Item</td>
<td><p id="ser"></p></td>
<td><input type="button" value="Search" onclick="search()" style="width:60px;background-
color:Violet"></td>
</tr>
<tr>
<input type="button" value="Delete" onclick="remove()" style="width:60px;background-
color:Violet">
<input type="button" value="Clear" onclick="removeAll()" style="width:60px;background-
color:Violet">
</td>
</tr>
</table>
<script language="javascript">
function insertItem()
{
var item = document.getElementById("txtItem").value;
var option = document.createElement("option");
option.text = item.trim();
x.add(option);
document.getElementById("txtItem").value=" ";
}
function Getselect()
{
{
var val =x[ x.selectedIndex].value;
document.getElementById("sel").innerHTML =val;
}
}
function GetIndex()
{
{
document.getElementById("ind").innerHTML =val;
}
}
function remove()
{
{
x.options.remove(val);
}
}
function GetCount()
{
var val = x.options.length;
document.getElementById("count").innerHTML =val;
}
function removeAll()
{
x.innerHTML = " ";
}
function search()
{
var howMany = x.options.length;
var item = document.getElementById("txtItem").value.trim();
var f=0
for(var i=0;i<howMany;i++)
{
var val = x[i].value;
if(item==val)
{
document.getElementById("ser").innerHTML =val;
f=1;
break;
}
}
if(f==0)
document.getElementById("ser").innerHTML ="Not Found";
}
</script>
</body>
</html>
Example Program for check Box
<html>
<body style="background-color:lightgreen;">
<div style="background-color: lightblue;">
<center>
<h1 style="color:green;"> Perform Arithmetic Operations Using Form</h1>
</center>
<form name="form1" >
<table border="1" align="center" bgcolor="DodgerBlue">
<tr>
<td>Enter the First Number</td>
<td> <input type="text" id="txt1" style="background-color:yellow"></td>
</tr>
<tr>
<td>Enter the Second Number</td>
<td> <input type="text" id="txt2" style="background-color:yellow"></td>
</tr>
<tr>
<td>Sum</td>
<td><p id="sum"></p></td>
</tr>
<tr>
<td>Difference</td>
<td><p id="diff"></p></td>
</tr>
<tr>
<td>Quotient</td>
<td><p id="prod"></p></td>
</tr>
<tr>
<td>Product</td>
<td><p id="quo"></p></td>
</tr>
<tr>
<td>Remainter</td>
<td><p id="rem"></p></td>
</tr>
<tr>
<input type="checkbox" name=c1 checked>+
<input type="checkbox" name=c2>-
<input type="checkbox" name=c3>*
<input type="checkbox" name=c4>/
<input type="checkbox" name=c5>%
</table>
</form>
</div>
{
var x = document.getElementById("txt1").value;
var y = document.getElementById("txt2").value;
if(document.form1.c1.checked == true)
{
c=parseInt(x)+parseInt(y);
document.getElementById("sum").innerHTML=c;
}
else
document.getElementById("sum").innerHTML=" ";
{
c=parseInt(x)-parseInt(y);
document.getElementById("diff").innerHTML=c;
}
else
document.getElementById("diff").innerHTML=" ";
{
c=parseInt(x)*parseInt(y);
document.getElementById("prod").innerHTML=c;
}
else
document.getElementById("prod").innerHTML=" ";
{
c=parseInt(x)/parseInt(y);
document.getElementById("quo").innerHTML=c;
}
else
document.getElementById("quo").innerHTML=" ";
{
c=parseInt(x)%parseInt(y);
document.getElementById("rem").innerHTML=c;
}
else
document.getElementById("rem").innerHTML=" ";
}
</script>
</body>
</html>
Example program (Strings)
<html>
<body style="background-color:lightgreen;">
<div style="background-color: lightblue;">
<center>
<h1 style="color:green;"> Perform Arithmetic Operations Using Form</h1>
</center>
<form name="form1" >
<table border="1" align="center" bgcolor="Violet">
<tr>
<td>Enter the String</td>
<td> <input type="text" id="txt1" style="background-color:yellow;width:300px" value="Lbs Centre For
Science And Technology" readonly></td>
</tr>
<tr>
<td>Lenght</td>
<td><p id="len"></p></td>
</tr>
<tr>
<td>Left</td>
<td><p id="left"></p></td>
</tr>
<tr>
<td>Right</td>
<td><p id="right"></p></td>
</tr>
<tr>
<td>Between</td>
<td><p id="mid"></p></td>
</tr>
<tr>
<td>Upper</td>
<td><p id="upper"></p></td>
</tr>
<tr>
<td>Lower</td>
<td><p id="lower"></p></td>
</tr>
<tr>
<input type="checkbox" name=c1 checked>Lenght
<input type="checkbox" name=c2>Left
<input type="checkbox" name=c3>Right
<input type="checkbox" name=c4>Between
<input type="checkbox" name=c5>Upper
<input type="checkbox" name=c6>Lower
</table>
</form>
</div>
{
var text = document.getElementById("txt1").value;
{
document.getElementById("len").innerHTML = text.length;
}
else
document.getElementById("len").innerHTML=" ";
{
document.getElementById("left").innerHTML =text.substr(0,3);
}
else
document.getElementById("left").innerHTML=" ";
{
document.getElementById("right").innerHTML =text.substr(text.length-10,10);
}
else
document.getElementById("right").innerHTML=" ";
{
document.getElementById("mid").innerHTML =text.substr(4,6);
}
else
document.getElementById("mid").innerHTML=" ";
{
document.getElementById("upper").innerHTML =text.toUpperCase();
}
else
document.getElementById("upper").innerHTML=" ";
{
document.getElementById("lower").innerHTML =text.toLowerCase();
}
else
document.getElementById("lower").innerHTML=" ";
}
</script>
</body>
</html>

Java Script Programs Using Form Example2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script Programs Using Form Example2

Uploaded by

Copyright:

Available Formats

Example Program using Radio Button

You might also like