Textual description of firstImageUrl

JavaScript in Hindi : Form Events

JavaScript Form Events

  • Introduction to javascript form events in Hindi 
  • Different Javascript form events in Hindi

Introduction to JavaScript Form Events

Users से किसी भी प्रकार की information प्राप्त करने के लिए forms बहुत ही important होते है। एक form कई elements से मिलकर बना होता है जैसे की text-boxes, buttons, checkboxes, radio buttons आदि। Forms के द्वारा कई प्रकार के events generate होते है।

Javascript में common form events की list निचे दी जा रही है।
  1. onblur - When an element loses focus.
  2. onchange - When state of an element changes.
  3. onfocus - When an element gains focus.  
  4. onfocusin - Occurs before an element gains focus.
  5. onfocusout - Occurs before an element loses focus.
  6. oninput - When user gives input or makes changes
  7. oninvalid - When input entered by user is invalid.
  8. onreset - Occurs when form is reset 
  9. onsearch - When user search for a term
  10. onselect - When text is selected from an element
  11. onsubmit - When a form is submitted

Forms के द्वारा generated इन events को handle करके आप forms को और भी interactive और dynamic बना सकते है। इन सभी events के बारे में निचे detail से दिया जा रहा है।

onblur 

जब किसी element से focus हटता है तो उस element पर onblur event generate होता है। उदाहरण के लिए मान लीजिये 2 text boxes है। जब user एक text box में value type करने के बाद दूसरे text के अंदर click करता है तो पहले वाले text box में ये event generate होगा।

ऐसा इसलिए होगा क्योंकि focus उस textbox से हट गया है। इस event को आप कई प्रकार से use कर सकते है जैसे की आप textbox के text का color change कर सकते है। इसका उदाहरण निचे दिया जा रहा है। 

<!-- onblurEventDemo.html -->

<html>
<head>
<title>onblur Demo</title>

<script>
function blurFunction(inputtext)
{
   inputtext.style.color="red";
}
</script>

</head>
<body>
When you click outside of this box it's text will become red.<br />
<form>
<!-- Calling function when textbox blur. -->
<input type="text" onblur="blurFunction(this)">
</form>
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onblur-event-example

onchange

जब किसी form element की state में कोई change आता है तो onchange event generate होता है। जैसे की यदि किसी drop down list में से कोई different item select किया जाता है तो उसकी state change हो जाती है और onchange event generate होता है।

इसका उदाहरण निचे दिया जा रहा है। 

<!-- onchangeEventDemo.html -->

<html>
<head>
<title>onchange Demo</title>

<script>
function changeFunction(selection)
{
    alert("An option was selected.");
}
</script>

</head>
<body>
<form>
<!-- Calling function when dropdown list item changed -->
<select onchange="changeFunction()">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</form>
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onchange-event-example

onfocus

जब आप किसी element से interact करते है तो वह element focus में आता है। जब कोई element focus में आता है तो onfocus event generate होता है। जैसे की यदि value input करने के लिए आप किसी textbox में click करते है तो उस textbox पर onfocus event generate होगा।

इसका उदाहरण निचे दिया जा रहा है।

<!-- onfocusEventDemo.html -->

<html>
<head>
<title>onfocus Demo</title>

<script>
function focusFunction(inputtext)
{
     inputtext.style.color="blue";
}
</script>

</head>
<body>
<form>
<!-- Calling function when textbox get focus -->
<input type="text" onfocus="focusFunction(this)">
</form>
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onfocus-event-example

onfocusin & onfoucsout 

किसी element के focus में आने से पहले onfocusin event generate होता है। ऐसा कोई भी task जो आप किसी element के focus में आने से पहले करना चाहते है तो उसे onfocusin event द्वारा handle कर सकते है।

जैसे की आप किसी element के focus में आने से पहले document के बाकी color का text change कर सकते है या फिर document का background color change कर सकते है।

किसी element से focus हटने से पहले onfocusout event generate होता है। कोई भी task जो आप element से focus हटने से पहले perform करना चाहते है इस event द्वारा handle कर सकते है।

इन दोनों events का complete उदाहरण निचे दिया जा रहा है। 

<!-- focusinoutEventsDemo.html -->

<html>
<head>
<title>onfocusin</title>
</head>

<script>
// Function will be executed when textbox gets focus.
function focusinFunction()
{
    document.bgColor="black";
    document.body.style.color="yellow";
}

// Function will be executed when textbox loses focus.
function focusoutFunction()
{
    document.bgColor="white";
    document.body.style.color="black";
}
</script>

<body>
<form >
<!-- Calling functions when textbox gets and loses focus. -->
Enter your name :<input type="text" onfocusin="focusinFunction()" onfocusout="focusoutFunction()">
</form>
</body>
</html>

ऊपर दी गयी script निचे दिया output generate करती है। 

javascript-focusin-&-focusout-event-examples

oninput

जब किसी element का content user interaction द्वारा change होता है तो उस element पर oninput event generate होता है। आसान शब्दों में कहा जाए तो जब user द्वारा input दिया जाता है तो oninput event generate होता है। इस event के generate होने पर आप कई प्रकार से action ले सकते है।

इसका एक उदाहरण निचे दिया जा रहा है। 

<!-- oninputEventDemo.html -->

<html>
<head>
<title>oninput Demo</title>

<script>
function inputFunction()
{
     document.getElementById("message").innerHTML="User typing......";
}
</script>

</head>
<body>
<!-- Executing function when some data is inputed. -->
<form oninput="inputFunction()">
Enter some text <input type="text">
</form>
<p id="message">Type something in above text box</p>
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-oninput-event-example

oninvalid 

जब किसी element के लिए input की गयी value invalid हो तो उस element पर oninvalid event generate होता है। उदाहरण के लिए यदि किसी required form field में user value input ना करे तो ये event generate होगा। इस event को handle करके आप user को appropriate message show कर सकते है।

इसका उदाहरण निचे दिया जा रहा है। 

<!-- oninvalidEventDemo.html -->

<html>
<head>
<title>oninvalid Demo</title>
</head>
<body>
<form>
<!-- Executing function if user submit an empty form -->
<input type="text" oninvalid="alert('Please fill the form');" name="name"  required>
<input type="submit" value="Submit">
</form>
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-oninvalid-event-example

onreset

जब किसी form को reset किया जाता है तो onreset event generate होता है। Form को reset करने पर form के सभी elements initial values पर set हो जाते है। इस event के generate होने पर आप user को कोई message show कर सकते है या फिर कोई और action भी ले सकते है।

इसका उदाहरण निचे दिया जा रहा है। 

<!-- onresetEventDemo.html -->

<html>
<head>
<title>onreset Demo</title>
</head>
<body>
<!-- Calling function if form is reset -->
<form onreset="alert('Form is being reset..')">
Enter some text : <input type="text"> <br />
<input type="reset">
</form>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

javascript-onreset-event-example

onsearch

जब search input field में user कुछ text type करके search करने के लिए enter press करता है तो onsearch event generate होता है। इस event के generate होने पर आप कोई message show कर सकते है या user को किसी url पर redirect कर सकते है।

इसका उदाहरण निचे दिया जा रहा है। 

<!-- onsearchEventDemo.html -->

<html>
<body>
<!-- Calling function when something is searched. -->
<input type="search"  onsearch="searchFunction(this)">

<script>
function searchFunction(inputtext)
{
   document.write("You have searched for : "+inputtext.value);
}
</script>

</body>
</html> 

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onsearch-event-example

onselect

जब किसी form element में से text select किया जाता है तो onselect event generate होता है। इस event के generate होने पर आप कोई भी action ले सकते है जैसे की कोई message show कर सकते है या फिर text का background color change कर सकते है। इसका उदाहरण निचे दिया जा रहा है।

<!-- onselectEventDemo.html -->

<html>
<head>
<title>onselect Demo</title>
</head>
<body>
<p> Select text inside textbox</p>
<!-- Calling function when some text is selected inside textbox. -->
<input type="text" value="Hello World!" onselect="alert('Text selection is disabled.');">
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onselect-event-example

onsubmit

जब user के द्वारा submit button click करके कोई form submit किया जाता है तो form element पर onsubmit event generate होता है। इस event पर आप कई प्रकार से actions ले सकते है जैसे की आप form validation perform कर सकते है।

इसका उदाहरण निचे दिया जा रहा है। 

<!-- onsubmitEventDemo.html -->

<html>
<head>
<title>onsubmit Demo</title>
<script>
function submitFunction()
{
    alert("Your application have been submitted.");
}
</script>
</head>

<body>
<!-- Calling function when form is submitted. -->
<form onsubmit="submitFunction()">
Enter your name :<input type="text" name="Name">
<input type="submit">
</form>
</body>

</html> 

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onsubmit-event-example


        DMCA.com Protection Status

 Leave a comment