Scribd
Upload
2 views

Javascript Events 1

The document provides examples of various HTML and JavaScript events, including blur, click, focus, change, and submit events. Each example demonstrates how to handle these events using JavaScript functions to interact with HTML elements. The examples include input fields, buttons, and forms, showcasing event handling through alerts, style changes, and form validation.

Uploaded by

pothalaanilkumar1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Javascript Events 1

The document provides examples of various HTML and JavaScript events, including blur, click, focus, change, and submit events. Each example demonstrates how to handle these events using JavaScript functions to interact with HTML elements. The examples include input fields, buttons, and forms, showcasing event handling through alerts, style changes, and form validation.

Uploaded by

pothalaanilkumar1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Form Event

BLUR

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The form Event</h2>

<p id="demo">This example specifies how the blur event works on.</p>

<input type="text" onblur="myFunction()">

<script>
function myFunction() {
alert("Input field lost focus.");
}
</script>

</body>
</html>

CLICK
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

FOCUS
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()" />

<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" red";
}
//-->
</script>
</body>
</html>

ONCLICK
<html>
<head> JS Event Handler </head>
<body>
<script language="Javascript" type="text/Javascript">
function clickevent()
{
document.write("This is mouse event");
}

</script>
<form>
<input type="button" onclick="clickevent()" value="which event is it?"/> <br>

</form>
</body>
</html>

CHANGE
<html>
<body>
<label for="country">Select a country:</label>
<select id="country" onchange="handleChange()">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="India">India</option>
</select>
<p id="txt"></p>
<script>
function handleChange() {
// Perform actions when the dropdown selection changes
var selectedCountry = document.getElementById('country').value;
document.getElementById("txt").textContent=
"Selected country: "+selectedCountry;
}
</script>
</body>
</html>

SUBMIT
<html>
<body>
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br/>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// Perform validation
if (username === "" || password === "") {
alert("Please fill in all fields");
return false; // Prevent form submission
}
alert("Form submitted! Username is:"+username+",Password is:"+password);
return true; // Allow form submission
}
</script>
</body>
</html>

You might also like