JavaScript Form Validation and DOM Manipulation

Java Script Advance
JavaScript Forms
HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns false, to
prevent the form from being submitted:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
The function can be called when the
form is submitted:
<form name="myForm" action="/action_page.php" onsubmit="re
turn validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
The HTML DOM (Document Object
Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
JavaScript can change all the HTML elements in the page

JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral

interface that allows programs and scripts to dynamically access and update the
content, structure, and style of a document."
What is the HTML DOM?
The HTML DOM is a standard object model and programming
interface for HTML. It defines:
The HTML elements as objects

The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or
change.
Finding HTML Elements
Method Description
document.getElementById(id); Find an element by element id
document.getElementsByTagName(“ Find elements by tag name

P”);
document.getElementsByClassName Find elements by class name

(“s1”)
Changing HTML Elements
Method Description
element.innerHTML = new html Change the inner HTML of an element
content
element.attribute = new value Change the attribute value of an HTML
element
element.setAttribute(attribute, value) Change the attribute value of an HTML
element
element.style.property = new style Change the style of an HTML element
Adding and Deleting Elements
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(element) Replace an HTML element
document.write(text) Write into the HTML output stream

<script>
<!DOCTYPE html> function myFunction() {
<html> var x =
<body>
document.getElementsByTagName("P")
<p>This is a p element</p> ;
<p>This is also a p element.</p>
var i;
for (i = 0; i < x.length; i++) {
<p>This is also a p element - Click the button to x[i].style.backgroundColor = "red";
change the background color of all p elements in
this document.</p>
}
<button onclick="myFunction()">Try it</button>
}
</script>
</body>
Adding Events Handlers
Method Description
document.getElementById(id).onclick = Adding event handler code to an onclick

function(){code} event
Exercise:
1. Use the getElementsByTagName method to find the <p> element, and
change its text to "Good Job!".
2. Use the DOM to find and display the document's title.

Changing the Value of an Attribute
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif“ >
<script>
document.getElementById("myImage").setAttri
bute(“width”,”200”);
</script>
</body>
</html>
JavaScript HTML DOM - Changing
CSS
html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").innerHTML = “Hello
pakistan";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Exercise
1. Use the HTML DOM to hide the <p> element.
2. Use the HTML DOM to change the text size of <p> to 40 pixels.
3. Write a JavaScript function to add rows to a table.
4. Write a JavaScript program to remove items from a dropdown list.
5. Write a JavaScript program to count and display the items of a dropdown list,
in an alert window.
JavaScript HTML DOM Events
Examples of HTML events:
When a user clicks the mouse

When a web page has loaded
When an image has been loaded
When the mouse moves over an
element
When an input field is changed
When an HTML form is submitted
When a user strokes a key
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this

text!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this

text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
The onload and onunload Events
The onchange Event
<!DOCTYPE html>
<html> <body>
<head>
<script> Enter your name: <input type="text" id="fname"
onchange="myFunction()">
function myFunction() {
<p>When you leave the input field, a function is triggered
var x = document.getElementById("fname");
which transforms the input text to upper case.</p>
x.value = x.value.toUpperCase();
} </body>
</script> </html>
</head>
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

JavaScript Errors - Throw and Try to Catch
The try statement lets you test a block of code for errors.
The catch statement lets you handle the error.
The throw statement lets you create custom errors.
The finally statement lets you execute code, after try and catch, regardless of the
result.

JavaScript Form Validation and DOM Manipulation

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

JavaScript Form Validation and DOM Manipulation

Uploaded by

Copyright:

Available Formats

Java Script Advance

JavaScript can change all the HTML elements in the page

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral

The HTML elements as objects

document.getElementById(id); Find an element by element id

document.getElementsByTagName(“ Find elements by tag name

document.getElementsByClassName Find elements by class name

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(element) Replace an HTML element

document.write(text) Write into the HTML output stream

document.getElementById(id).onclick = Adding event handler code to an onclick

2. Use the DOM to find and display the document's title.

<img id="myImage" src="smiley.gif“ >

<p id="p2">Hello World!</p>

<p>The paragraph above was changed by a script.</p>

When a user clicks the mouse

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this

<h1 onclick="changeText(this)">Click on this

The onchange Event

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

The catch statement lets you handle the error.

The throw statement lets you create custom errors.

You might also like