<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
</head>
<body>
<h1>Form Events</h1>
<form action="" onsubmit="submitFunction()">
<label>First Name</label>
<input type="text" placeholder="first_name" id="fname" value="adnan" onfocus="focusFunction(this)" onblur="blurFunction(this)" oninput="inputFunction(this)"
onselect="selectFunction(this)" />
<br>
<br>
<label>Last Name</label>
<input type="text" placeholder="last_name" id="lname" onfocus="focusFunction(this)" onblur="blurFunction(this)"
oninput="inputFunction(this)"
oninvalid="alert('please fill the last name feild..!')"
required
/>
<br>
<br>
<label>Favourit Fruit</label>
<select id="fruit" onfocus="focusFunction(this)" onblur="blurFunction(this)"
onchange="changeFunction(this)"
>
<option value="0">Select...</option>
<option value="1">Apple</option>
<option value="2">Orange</option>
</select>
<br>
<br>
<button type="submit">Submit Event</button>
</form>
<div id="text" style="border:1px solid pink">
</div>
<script>
function focusFunction(element){
// document.getElementById('fname').style.background = 'lime';
element.style.background = 'lime';
}
function blurFunction(element){
// document.getElementById('fname').style.background = 'lime';
element.style.background = '';
}
// Input event.
// this event only work on input and textarea
// this event trigger when we start writing on the input or textarea
function inputFunction(element){
var val = element.value;
document.querySelector('#text').innerHTML = val;
}
// onchange event
// this event work like oninput event but run on if chnage happen than previous state.
// see the chnage effect on chnage select option.
// input feld pr onchnage event teb kaam krega jb ap lost focus kreinge mean on feild se focus remove kreinge.
function changeFunction(element){
var val = element.value;
document.querySelector('#text').innerHTML = val;
}
// onselect event
// this event run when we select content in input feild
// we use this event in input or textarea.
function selectFunction(element){
var val = element.value;
console.log(val);
console.log('you have selected some text');
}
// onsubmit event
// this event we use on submit button/ input
// when user fill the form and submit the form, this event triggers.
function submitFunction(){
var x = document.getElementById('fname').value;
alert('Hello '+ x);
}
// oninvalid event
// when user submit form with empty input feild if feild is required than invalid event fire(run).
</script>
</body>
</html>
Comments
Post a Comment