The document provides information about HTML forms and JavaScript. It includes examples of HTML form fields like text, password, checkbox, radio buttons, and submit buttons. It also discusses how JavaScript can be used to validate form data, submit forms, and perform calculations. The last part discusses AJAX and how JavaScript and XMLHttpRequest object can be used to make asynchronous calls to retrieve and display data without reloading the page.
3. Submit Data From HTML Form
<HTML>
<HEAD></HEAD>
<BODY>
<FORM METHOD=“GET” ACTION="HelloName.jsp">
Enter Name
<INPUT TYPE="text" NAME="fName">
<INPUT VALUE="GO" TYPE="submit">
</FORM>
</BODY>
</HTML>
GET
POST
On Submit -
http://localhost:8080/aajkiapp/HelloName.jsp?fName=Sunrays
www.SunilOS.com 3
7. JavaScript
It is the scripting language of the Web.
It is used in millions of Web pages to add
functionalities:
o Validate forms
o Detect browsers
o Handle Cookies
..and much more
www.SunilOS.com 7
8. <script> Tag
<HTML>
<HEAD>
o <SCRIPT LANGUAGE="JavaScript">
o function hello(){
o alert(“Pahala Pahala Click");
o }
o </SCRIPT>
</HEAD>
<input name="operation" type="button" value="Click Me"
onclick="hello()" >
www.SunilOS.com 8
9. Key points
Javascript functions are written in script tag.
o <script language="text/javascript">…</script>
Tag <script > can be written anywhere in HTML but
<HEAD> tag is preferred to write it because head position
is first loaded in browser.
Function is always started with 'function' key word.
Variables are defined by optional 'var' keyword. For
example
o var msg =0; //with var
o OR
o msg=0; //witout var
www.SunilOS.com 9
10. Key points (Cont.)
Data type of a variable is depending on its stored
value.
o var num= 1; //integer
o var name ="sunrays“; //string
o var salary = 1.5; //float
String can be represented by single quote (') or
double quote (") in Javascript.
o var org = “sunrays”;
o var org = 'sunrays' ;
www.SunilOS.com 10
11. <INPUT event
Attribute The event occurs when...
onabort Loading of an image is interrupted
onblur An element loses focus
onchange The user changes the content of a field
onclick Mouse clicks an object
ondblclick Mouse double-clicks an object
onerror An error occurs when loading a document or an image
onfocus An element gets focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed or held down
onkeyup A keyboard key is released
onload A page or an image is finished loading
www.SunilOS.com 11
12. Javascript Objects
<HTML>
<HEAD></HEAD>
<BODY>
<FORM NAME=‘helloForm’ METHOD=“GET”
ACTION="HelloName.jsp">
o Enter Name
o <INPUT TYPE="text" NAME=“name“ VALUE=‘XYZ’>
<INPUT VALUE="GO" TYPE="submit">
</FORM>
</BODY>
</HTML>
document
form
name
alert(document.helloForm.name.value);
www.SunilOS.com 12
17. Calculate Sum
<script type="text/javascript">
function calc(frm){
var n1 = parseInt(frm.num1.value);
var n2 = parseInt(frm.num2.value);
frm.sum.value = n1 + n2;
return frm.sum.value;
}
</script>
www.SunilOS.com 17
18. Validation on form submit
<form onsubmit="return validate(this)">
o User ID <input type="text" name="id"><br>
o Password <input type=“text" name="pwd">
o <input type="submit" value=“Go" >
</form>
www.SunilOS.com 18
19. Validate method
function validate(frm){
var flag = true;
if(frm.id.value == ''){
alert("User ID can not be null");
flag = false;
}
if(frm.pwd.value == ''){
alert("Password can not be null");
flag = false;
}
return flag;
}
www.SunilOS.com 19
20. Reusable functions .js file
Reusable functions can be stored in a text file that
has extension .js.
HTML pages can import functions from a .js file to
use them.
HTML pages can import multiple .js files.
Include .js files into HTML by <script> tag:
o <script type="text/javascript" src="menu.js">
o <script type="text/javascript" src=“calendar.js">
www.SunilOS.com 20
22. AJAX
Asynchronous JavaScript and XML
HTML pages call a web resource (web page)
asynchronously (in the background) without impacting
existing displaying page.
HTML pages can send and receive data with the help of
AJAX from the source server asynchronously.
Object XMLHttpRequest is used to make asynchronous
calls.
Usually JSON data fetched by AJAX calls.
www.SunilOS.com 22
23. Get XmlHttpObject
function getXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
www.SunilOS.com 23
24. HTML
Sign Up Guest :
<INPUT TYPE="radio“ NAME="site“ onClick="getContent(‘/App/Guest')">
Sign Up Patient:
<INPUT TYPE="radio" NAME="site“ onClick="getContent('/App/Patient')">
Sign Up Doctor:
<INPUT TYPE="radio" NAME="site“ onClick="getContent('/App/Doctor')" >
<TD id='bodyText'> AJAX Text will be replaced here </TD>
www.SunilOS.com 24
25. Get Data
function getContent(url){
o var xmlHttp = getXmlHttpObject();
o xmlHttp.open("GET",url,true);
o //attach function
o xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status == 200) {
• var cont = xmlHttp.responseText;
• document.getElementById('bodyText').innerHTML = cont;
}
o }
o xmlHttp.send(null);
}
www.SunilOS.com 25
26. Disclaimer
This is an educational presentation to enhance the
skill of computer science students.
This presentation is available for free to computer
science students.
Some internet images from different URLs are
used in this presentation to simplify technical
examples and correlate examples with the real
world.
We are grateful to owners of these URLs and
pictures.
www.SunilOS.com 26