Page 166 - Computer Software Application TP - Volume 1
P. 166
COMPUTER SOFTWARE APPLICATION - CITS
EXERCISE 42 : Using Java Script with Forms
Objectives
At the end of this exercise you shall be able to
• use HTML forms with javascript
• validate HTML form using javascript
• create Dynamic form elements.
Requirements
Tools/Materials
• Desktop / Laptop with latest configuration
• Text editor
• Web browser
Procedure
TASK 1: Simple Form Submission
1 Open the text editor
2 Write the following codes
<html>
<head></head>
<body>
<form id=”myForm”>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username”>
<button type=”submit”>Submit</button>
</form>
<script>
const form = document.getElementById(“myForm”);
form.addEventListener(“submit”, handleSubmit);
function handleSubmit(event) {
event.preventDefault();
const username = document.getElementById(“username”).value;
console.log(“Submitted username:”, username);
}
</script>
</body>
</html>
3 Save the program as a .html file
4 Open the html file with a web browser
5 Enter a text in the textbox and press submit button.
6 Go to the browsers console tab and verify the output.
151
CITS : IT & ITES - Computer Software Application - Exercise 41
