Scribd
Upload
24 views92 pages

YBS Unit III Form & Event Handling-1

This document provides an overview of form and event handling in web development, detailing various HTML form components such as text inputs, text areas, checkboxes, radio buttons, and select elements. It also explains the Browser Object Model (BOM) and Document Object Model (DOM), including methods for interacting with these objects using JavaScript. Additionally, it highlights the differences between class and id attributes in HTML and their usage in JavaScript for element manipulation.

Uploaded by

Guruprasad Potdar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views92 pages

YBS Unit III Form & Event Handling-1

This document provides an overview of form and event handling in web development, detailing various HTML form components such as text inputs, text areas, checkboxes, radio buttons, and select elements. It also explains the Browser Object Model (BOM) and Document Object Model (DOM), including methods for interacting with these objects using JavaScript. Additionally, it highlights the differences between class and id attributes in HTML and their usage in JavaScript for element manipulation.

Uploaded by

Guruprasad Potdar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 92

UNIT III: FORM & EVENT

HANDLING

MR. Y. B. SANAP
LECTURER IN IT DEPT.,
GOVERNMENT POLYTECHNIC, AMBAD
Building A Blocks Of A Form
2

Form is typical layout on the web page by which a user can


interact with the web page.
Typical components of forms are text, text area, checkboxes,
radio buttons & push buttons. These components of form are
also called as form controls.
HTML allows us to place these form components on the web page.
All these form contents in the <form> tag.
The form has an attributes action which gets executed user
clicks a button on the form.
Building A Blocks Of A Form
3

Uses of form:
1. Forms are used to collect the information from customer for
online registration.
2. Forms are used for online survey.
3. Forms are used for conduction online examination.
4. The information present in the forms is submitted to the server
for further processing.
Properties & Methods Of Form
4

<form name=“myform” action=“/myserverPage” method= “GET”


target=“_blank”>
</form>
Text
5

Text is typically required to place one line text.


This control is used for items that require only one line of user
input is known as Single-line text input controls.
They are created using HTML <input> tag.
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Middle name: <input type = "text" name = “middle_name"
/>
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
Text Area

This is used when the user is required to give details that may be
longer than a single sentence.
Multi-line input controls are created using HTML <textarea>
tag.
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
Button

There are various ways in HTML to create clickable buttons.


You can also create a clickable button using <input>tag by
setting its type attribute to button.
<!DOCTYPE html>
<html>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
"/html/images/logo.png" />
</form>
</body>
</html>
Checkbox

Checkboxes are used when more than one option is required


to be selected.
They are also created using HTML <input> tag but type
attribute is set to checkbox.
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
Choose Your Subject : <br />
<input type = "checkbox" name = “Subject" value = "on"> CSS <br />
<input type = "checkbox" name = " Subject " value = "on"> AJP <br />
<input type = "checkbox" name = " Subject " value = "on"> OSY <br />
<input type = "checkbox" name = " Subject " value = "on"> STE <br />
</form>
</body>
</html>
Radio Button

Radio buttons are used when out of many options, just one
option is required to be selected.
They are also created using HTML <input> tag but type
attribute is set to radio.
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
Choose Your Subject : <br />
<input type = "radio" name = "Subject" value = "on” checked="on" >
CSS <br />
<input type = "radio" name = "Subject" value = "on"> AJP <br />
<input type = "radio" name = "Subject" value = "on"> OSY <br />
<input type = "radio" name = "Subject" value = "on"> STE <br />
Choose Your Class : <br />
<input type = "radio" name = "Class" value = "on"> TYCO <br />
<input type = "radio" name = "Class" value = "on"> SYCO <br />
</form>
</body>
Select Elements
A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from where
a user can select one or more options.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
Choose Your Subject by Following Dropdown: <br />
<select name = "dropdown">
<option value = "Subject" selected>CSS</option>
<option value = "Subject">AJP</option>
<option value = "Subject">OSY</option>
<option value = "Subject">STE</option>
</select>
</form>
</body>
</html>
Browser Object Model (BOM)
In order to work with browser we should know BOM
When we have to interact with different browser we have to take
help of different BOM, with the help of BOM we can perform
browser related task.
The default object of browser is window means you can call all the
functions of window by specifying window or directly.
 BOM first object is window object
<!doctype html>
<html>
<head><title>Assign values</title>
<script type="text/javascript">
window.alert("GP Ambad");
alert("Information Technology");
</script>
</head>
<body>

</body>
</html>
Methods of window object
The window object represents a window in browser. An object of
window is created by automatically
Method Description
alert() displays the alert box containing message with ok
button.
confirm() displays the confirm dialog box containing message
with ok and cancel button.
prompt() displays a dialog box to get input from the user.

open() opens the new window.


close() closes the current window.
setTimeout() performs action after specified time like calling
function, evaluating expressions etc.
//Example of alert() in javascript

<!doctype html>
<html>
<head><title>Assign values</title>
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
</head>
<body>
</body>
</html>
//Example of confirm() in javascript
<!doctype html>
<html>
<head><title></title>
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}

}
</script>
<input type="button" value="delete record" onclick="msg()"/>
</head>
<body>
</body>
</html>
//Example of prompt() in javascript
<!doctype html>
<html>
<head><title></title>
</head>
<body>
<script type="text/javascript">
function msg(){
var v= prompt("Who are you?");
alert("I am "+v);
}
</script>
<input type="button" value="click" onclick="msg()"/>
</body>
</html>
//Example of open() in javascript
<!doctype html>
<html>
<head><title></title>
</head>
<body>
<script type="text/javascript">
function msg(){
open("http://www.javatpoint.com");
}
</script>
<input type="button" value="javatpoint" onclick="msg()"/>
</body>
</html>
//Example of setTimeout() in javascript
<!doctype html>
<html>
<head><title></title>
</head>
<body>
<script type="text/javascript">
function msg(){
open("http://www.javatpoint.com");
}
</script>
<input type="button" value="javatpoint" onclick="msg()"/>
</body>
</html>
Document Object Model
The HTML DOM (Document object model)- when web page is
loaded, the browser creates a Document object model of the page.
It is the root element that represents the html document. It has
properties and methods.
The document object represents the whole html document
Document object deals with HTML element
All the elements which we will add in my browser in my program
and how to show those elements is defined by DOM
As mentioned earlier, it is the object of window. So
 window.document it is same as document.
Properties of document object
 properties of document object that can be accessed and modified
by the document object.
Methods of document object
We can access and change the contents of document by its methods.
The important methods of document object are as follows:

Method Description
write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with newline


character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.
HTML class Attribute
The class attribute is often used to point to a class name in a style
sheet. It can also be used by a JavaScript to access and manipulate
elements with the specific class name.
The class attribute can be used on any HTML element.
The class name is case sensitive!
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
</body>
</html>
Use of The class Attribute in JavaScript
The class name can also be used by JavaScript to perform certain
tasks for specific elements.
JavaScript can access elements with a specific class name with
the getElementsByClassName() method:
HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML
element.
The id attribute specifies a unique id for an HTML element. The
value of the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a
style sheet. It is also used by JavaScript to access and manipulate the
element with the specific id.
The syntax for id is: write a hash character (#), followed by an id
name. Then, define the CSS properties within curly braces {}.
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Difference between Class and ID
A class name can be used by multiple HTML elements, while an id
name must only be used by one HTML element within the page:
Using The id Attribute in JavaScript
The id attribute can also be used by JavaScript to perform some
tasks for that specific element.
JavaScript can access an element with a specific id with
the getElementById() method:
<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById()
method:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Document Object Model (DOM)
Accessing field value by document object
Lets assume I have written a program in that body part is empty
(we don’t have any HTML element) then nothing will display on
browser window
But if I add any element in body section then information will get
displayed
The document object represents the whole html document
The different objects which we had for BOM like navigator, histroy,
winodw and screen similar to that we have document object
But document object deals with HTML elements
all the elemets which I add in my browser in my program and how
to show those elements is defined by DOM
Document Object Model (DOM)
When HTML document is loaded in the browser, it become a
document object. It is the root element that represents the html
document.
Html elements became objects of document
DOM it has properties and methods. By the help of
document object, we can add dynamic content to our web page.
If we have to perform any dynamic task we can do help of Java
Script
Document Object Model (DOM)- Accessing field value by document object

In this example, we are going to get the value of input text by user.
Here, we are using document.form1.name.value to get the value of
name field.
Here, document is the root element that represents the html
document.
form1 is the name of the form.
name is the attribute name of the input text.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>

<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form> </body>
</html>
Document Object Methods
Already we have seen write and writeln method
Javascript - document.getElementById() method
The document.getElementById() method returns the element of
specified id.
In the previous example, we have
used document.form1.name.value to get the value of the input
value. Instead of this, we can use document.getElementById()
method to get value of the input text. But we need to define id for
the input field.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>

</body>
</html>
Javascript - document.getElementsByName() method
The document.getElementsByName() method returns all the
element of specified name.
The syntax of the getElementsByName() method is given below:
document.getElementsByName("name")
Example of document.getElementsByName() method
In this example, we going to count total number of genders. Here, we
are using getElementsByName() method to get all the genders.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">

<input type="button" onclick="totalelements()" value="Total Genders">


</form>

</body>
</html>
Javascript - document.getElementsByTagName() method

The document.getElementsByTagName() method returns all the


element of specified tag name.
The syntax of the getElementsByTagName() method is given below:
document.getElementsByTagName("name")
Example of document.getElementsByTagName() method
In this example, we going to count total number of paragraphs used in
the document. To do this, we have called the
document.getElementsByTagName("p") method that returns the total
paragraphs.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function countpara(){
var totalpara=document.getElementsByTagName("p");
alert("total p tags are: "+totalpara.length);

}
</script>
<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by getElementByTagName()
method.</p>
<p>Let's see the simple example</p>
<button onclick="countpara()">count paragraph</button>

</body>
</html>
Javascript - document.getElementsByTagName() method

Another example of document.getElementsByTagName() method


In this example, we going to count total number of h2 and h3 tags
used in the document.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function counth2(){
var totalh2=document.getElementsByTagName("h2");
alert("total h2 tags are: "+totalh2.length);
}
function counth3(){
var totalh3=document.getElementsByTagName("h3");
alert("total h3 tags are: "+totalh3.length);
}
</script>
<h2>This is h2 tag</h2>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<button onclick="counth2()">count h2</button>
<button onclick="counth3()">count h3</button>

</body>
Javascript - innerHTML
 The innerHTML property can be used to write the dynamic html
on the html document.
It is used mostly in the web pages to generate the dynamic html
such as registration form, comment form, links etc.
Example of innerHTML property
<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>


<p>JavaScript can access an element with a specified id by using the getElementById()
method:</p>

<h1 id="myHeader">Hello World!</h1>


<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

</body>
</html>
Javascript - innerText
The innerText property can be used to write the dynamic text on
the html document. Here, text will not be interpreted as html text
but a normal text.
It is used mostly in the web pages to generate the dynamic content
such as writing the validation message, password strength etc.
Javascript innerText Example
In this example, we are going to display the password strength when
releases the key after press.
<html>
<body>
<script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>5){
msg="good";
}
else{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}

</script>
<form name="myForm">
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>
</form>
</body>
</html>
Form Events
Forms are one of the most common web page elements used with
JavaScripts. JavaScript is commonly used with forms for following
two reasons
 To add functionality that makes forms easier for users to fill out, and
 To validate or process the data that a user enters before that data is submitted to
a server side script
HTML forms serve the purpose of collecting information provided
by the visitors, which is later sent back to the server
One of the primary ways in which JavaScript is executed on a web
page is through events. An event is a specific circumstances (such as
an action performed by a user or an action perform by the browser)
that is monitored JavaScript and that your script can respond to in
same way
Form Events
You can use JavaScript events to allow users to interact with your
web pages. The most common events are actions that users
perform. For example, when a user clicks a form button, a click
event is generated.
When the page loads, it is called an event. When the user clicks a
button, that click too is an event. Other examples include events like
pressing any key, closing a window, resizing a window, etc.
//even without form object
<!doctype html>
<html>
<head>
<script>
function msg()
{
alert("hello Students")
}
</script>
</head>
<body>
<input type="button" value="click here" onclick="msg()">
</body>
</html>
Form Object and Elements
The form object is represented by HTML <form> element. The
syntax of <form> is
<form name=“myform” id=“myform” action=“page.html” onSubmit=“test()>
……objects….
</form>
The attributes of form are:
id: the unique identifier
name: the name, its role is equivalent to that of identifier but for the functions
DOM, because the method getElementById is based on the id.
action: the name of a script to be loaded when the form is submitted, with
submit button
onSubmit: event fired up when the form s submitted and before the
execuation of the action
Form Object and Elements
A form element that can be represented as a text box, passowrd text
box, check box, radio button, submit button, reset button, hidden
input field, image
Following table lists HTML
form element
Form Object and Elements
To declare form element use <input> tag with following parameters
<input type=“button” id=“btn” value=“Assign values” onClick=“assign()”>
 name: can be used so that the value of the element can be processed
 type: can be used to specify the type of input
 id: identification name of element
 value: can be used to specify the initial value
 checked: can be used when type is set to checkbox or radio to set the initial
state
 maxlength: can be used to specify the maximum number of characters
allowed in a text box
Form Object and Elements
 Once you have created form control objects on form then you can assigning
values to these from control objects.
 A particular element on html form should be properly used as per DOM
(Document Object Model) hierarchy
 For example a textbox on a web document will be represented by
document.forms.form_id.element_id.property/method
 JavaScript also provides some methods [getElementId()and
getElementsByTagName()]through which you can also use a html element
directly without using above notation.
 Following example show that when user click on button then some
value will get assigned to form control objects.
<!doctype html>
<html>
<head><title>Assign values</title>
<script>
function assign()
{
document.forms.book.title.value="scripting technology";
document.forms.book.author.value="ganesh sable";
}
</script>
</head>
<body>
<form id="book" action="">
<input id="title"><br/>
<input id="author">
<input type="button" id="btn" value="Assign Values" onClick="assign()">
</body>
</html>
Properties and methods of form
 The form object represents a <form> element in an HTML document. The
elements property is an HTMLCollection that provide convenient access to
all elements of the form. the submit() and reset() methods allow a form to be
submitted or reset under program control
Properties and methods of form
 Form and the elements they contain can be selected from a document using
standard methods like getElementId() and getElementsByTagName()
//Addressing Component directly
<!doctype html>
<html>
<head><title>Assign values</title>
<script>
function assign()
{
document.getElementById("title").value="scripting technology";
document.getElementById("author").value="ganesh sable";
}
</script>
</head>
<body>
<form id="book" action="">
<input id="title" value="hello"><br/>
<input id="author">
<input type="button" id="btn" value="Assign Values" onClick="assign()">
</body>
//Addressing Component directly <div id="panel"></div>
<!doctype html>
<html> <script>
<head> var
item1=document.getElementById("item1
</head> ");
<body> var
<p id ="panel"></p> elems=document.getElementsByTagName
<ol> ("li");
<li>Apple</li> var item2=elems[4];
<li id="item1">Banana</li> document.writeln("Total no of list
<li>Grapes</li></ol> items"+elems.length);
document.write("<br/>specific
<ul> item one"+item1.innerText);
<li>Mango</li> document.write("<br/>Specific
<li>Pineapple</li> Item two"+item2.innerText);
<li>Guava</li> </script>
</ul> </body>
DOM
1
Form Events

Event is an activity that represent a change in the environment.


A JavaScript event is an action that can be detected by JavaScript.
Many of them are initiated by user action but some are generated
by the browser.
Event is triggered & then it can be caught by JavaScript functions,
which then do something response.
Event handler is a script that get executed in response to these
events. Event handler enables the web documents to respond the
user activities through the browser window.
Event are specified in lowercase & these are case sensitive.
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</body>
</html>
Mouse Events
Mouse Event are used to capture the interaction made by the
user by using mouse.
<html>
<head>
<script>
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result....</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Key Events
Key Event are used to capture the interaction made by the user
by using key.
<html>
<head>
<script>
<!--
function fun1() {
alert("A key is pressed.")
}
function fun2() {
alert("A key is Realsed.")
}
</script>
</head>
<body>
<input type = "text" onkeypress = "fun1()" onkeyup="fun2()">
</body>
</html>
Form Objects & Elements
form object is a Browser object of JavaScript used to access an
HTML form.
If a user wants to access all forms within a document then he can use
the forms array.
This array includes an item for each form element, indexed starting
with 0.
The form object is actually a property of document object that is
uniquely created by the browser for each form present in a
document.
The properties and methods associated with form object are used to
access the form fields, attributes and controls associated with
forms.
<html>
<head>
<script language="javascript">
function validate() {
var method = document.forms[0].method;
var action = document.forms[0].action;
var value = document.forms[0].elements[0].value;
if(value != "CSS"){
document.forms[0].reset(); </head>
} <body>
else { <form method="post">
alert("Hi CSS....!!"); <input type="text" name="user" size=32>
} <input type="submit" value="Press Me!"
} onClick="validate()">
</script> </form>
</body>
</html>
Changing Attribute Value Dynamically
It is possible to change the attributes of the form elements
dynamically.
During form filling process itself , the color or font of the text
field can be changed.
The dynamic change helps the user to notify the importance
change in the form fields.
<html>
<head>
<script type = "text/javascript">
function fun(e)
{
e.style.background= 'pink';
}
</script> </head>
<body>
<form name = "myform">
Enter RollNo: <input type ="text" name= "roll" onchange="fun(this)"/>
<br/> <br/>
Enter Name: <input type ="text" name= "name" onchange="fun(this)"/>
<br/>
<input type="submit" value ="Submit">
</form>
</body> </html>
Changing Option List Dynamically
Option list represents the list of one or more than one items
which can be chosen by the user.
In a web application it is a common practice to change the
content of the option list base on some category chosen.
JavaScript allows to change the item present in the list
dynamically.
Java Script Program:
Java Script on Changing Option List Dynamically.docx
Evaluating Checkbox Selection
Evaluating Checkbox Selection is a simple technique using which
we can display the named of check boxes that are selected.
<html> <head>
<script type="text/javascript">
function printChecked(){
var items=document.getElementsByName('sub');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
alert(selectedItems);
}
</script>
</head>
<body style="text-align: left;">
<h1>JavaScript - Print value of all checked (selected) CheckBoxes on Button click.</h1>
<big>Select your favourite accessories: </big><br>
<input type="checkbox" name="sub" value="CSS">CSS<br>
<input type="checkbox" name="sub" value="AJP">AJP<br>
<input type="checkbox" name="sub" value="OSY">OSY<br>
<input type="checkbox" name="sub" value="STE">STE<br>
<p> <input type="button" onclick='printChecked()' value="Print Selected Items"/> </p>
</body> </html>
Changing A Label Dynamically
We can change the label of any from element dynamically.
The same element can be used for multiple purpose by simply
changing the label.
<html>
<body>
Enter a Name: <input type="text" id="emp" value="" />
<p>
<input type="button" id="bt" value="Change Label Text"
onclick="changeLabel()" />
</p>
<label id="lblEmp">N/A</label>
</body>
<script>
function changeLabel() {
let lbl = document.getElementById('lblEmp');
let empName = document.getElementById('emp').value;
lbl.innerText = empName;
}
</script>
</html>
Manipulating Form Elements

We can manipulating form elements before submitting it to the


web server.
For that purpose we can keep some field hidden & at the time
of submitting the form, the desired value can be set to the
hidden field so that the assigned value for the hidden can be
submitted.
<html> <head> <script>
function MyFunction()
{
with(document.forms.myform)
{
if(name.value.length>0 && roll.value.length>0)
regid.value=name.value.charAt(0)+name.value.charAt(1)+ roll.value;
}
}
</script> </head>
<body>
<form name="myform">
Roll Number : <input type= "text" name="roll"/><br><br/>
Name : <input type= "text" name="name"/><br><br/>
Reg. ID : <input type= "hidden" name="regid"/><br><br/>
<input type="submit" name="Submit" value="Submit"
onclick="MyFunction()"/>
</form>
</body> </html>
Intrinsic JavaScript Functions

Intrinsic function means the built in functions that are provided


by JavaScript.
The JavaScript provides the Intrinsic function for Submit &
Reset Button. It can be used while submitting the form or
resetting the form fields.
The submit() method of the form object can be used to send the
form to the server in exactly same way as if the user has pressed
the submit button.
<html> <body>
<form name="myform">
Roll Number : <input type= "text" name="roll"/><br><br/>
Name : <input type= "text" name="name"/><br><br/>
<img src= "Submit.png" onclick
="javascript:document.forms.myforms.submit()"/><br><br/>
<img src= "Reset.png" onclick
="javascript:document.forms.myforms.submit()"/><br><br/>
</form>
</body>
</html>
Disabling Elements

We can restrict some fields on the form by using disabled.


If disabled property of particular form element is set to true then
user can not edit that element. Similarly on setting property to
false we can edit the field.
<!DOCTYPE html>
<html>
<body>
First Name: <input type="text" id="myText" value=“CSS"><br><br>
<button onclick="disableTxt()">Disable Text field</button>
<button onclick="undisableTxt()">Undisable Text field</button>
<script>
function disableTxt() {
document.getElementById("myText").disabled = true;
}
function undisableTxt() {
document.getElementById("myText").disabled = false;
}
</script>
</body>
</html>
Read Only Elements
Some time we need to set some value to a field which user should
not change.
To restrict user form changing the value of particular field we make
the element readonly by setting readonly= true.
<html>
<body>
Name: <input type="text" id="myText">
<button onclick="myFunction()">Read Only Button</button>
<script>
function myFunction()
{
document.getElementById("myText").readOnly = true;
}
</script>
</body>
</html>

You might also like