Read form data calculate in Javascript
Table of Contents
- Reading form values into JavaScript
- Reading form value into JavaScript when for an onBlur event.
- Performing calculation with form data in JavaScript
- Login Form Validation using JavaScript
Reading form value into JavaScript
Menu
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function read_data(form) {
data = form.t1.value;
alert ("You entered " + data);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="t1" VALUE="" >
<INPUT TYPE="button" NAME="button" Value="Click" onClick=" read_data
(this.form)">
</FORM>
</BODY>
</HTML>Result:
Reading form value into JavaScript when for an onBlur event.
read_data() function can be call with OnBlur event
Example2: <HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function read_data(form) {
data = form.t1.value;
alert ("You entered : " + data);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="t1" VALUE="" OnBlur="read_data(this.form)">
<INPUT TYPE="button" NAME="button" Value="Click" >
</FORM>
</BODY>
</HTML>
Performing calculation with form data in JavaScript
Read two numbers from the form and calculate the sum of those numbers and print it on a web page.
Example:
<html>
<head>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("v1").value);
var val2 = parseInt(document.getElementById("v2").value);
document.getElementById("v3").value = val1 + val2;
}
</script>
</head>
<body>
value1 = <input type="text" id="v1" name="v1" value="1"/><br />
value2 = <input type="text" id="v2" name="v2" value="2"/><br />
Result = <input type="text" id="v3" name="v3" value=""/><br />
<input type="button" name="Sumbit" value="Click here" onclick="addNumbers()"/><br />
</body>
</html>
Login Form Validation using JavaScript
Menu
<html> <head> <script language="JavaScript"> function verify() { for(i=0;i<document.forms[0].length;i++) { if(document.forms[0].elements[i].value=="") { alert("Please fill in the "+document.forms[0].elements[i].name); document.forms [0].elements[i].focus(); return (false); } } return true; } </script> </head> <body bgcolor="orange"> <form action="db_login.php" method="GET" OnSubmit="return verify()"> <center> <br><br><br><br> <font color="white" size=5> <u>Login Details</u><br><br><br> </font> <table> <tr> <td>Username:</td> <td> <input type="text" name="user"/> </td> </tr> <tr> <td>Password:</td> <td> <input type="password" name="pwd"/> <td/> </tr> <tr> <td> </td> <td> <input type="submit" value="login" /> </td> </tr> </table> </center> </form> </body> </html>
Result
Comments
Post a Comment