Jquery Form Events

Hey Guys,

Welcome to wearewriter.com

So Today we will discuss the Jquery Form events .

Yesterday we cover the Jquery mouse events and Jquery keyboard events .

If you want more updates regarding jquery so visit our website for full jQuery tutorial.

Jquery Form Events

these form events are following –

  1. Blur()-Occurs when the element loses focus.
  2. Submit()-Occurs when form is submitted.
  3. Change()-Occurs when the element changes.
  4. Focus()-Occurs when the element gets focus.

So lets discuss all 4 jquery form events step by step –

Jquery Blur() Event

The jQuery blur event occurs when element loses focus. It can be generated by via keyboard commands like tab key or mouse click anywhere on the page.

This event was used only with form elements like <input>. In latest browsers, it has been extended to include all element types.

SYNTAX-

$(selector).blur()  

It triggers the blur event for selected elements.

$(selector).blur(function)  

it adds a function to the blur event.

EXAMPLE-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").blur(function(){
    alert("This input field has lost its focus.");
  });
});
</script>
</head>
<body style="background-color: pink;">
<H1>Welcome to wearewriter.com</H1>
<hr>
<h2>Jquery Form Events</h2>
Enter your name: <input type="text">
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>

</body>
</html>

OUTPUT-

Jquery Submit() Event

jQuery submit() event is sent to the element when the user attempts to submit a form.

This event is only attached to the <form> element. Forms can be submitted either by clicking on the submit button or by pressing the enter button on the keyboard when that certain form elements have focus.

SYNTAX-

$(selector).submit()  

It adds a function to the submit event.

$(selector).submit(function)  

EXAMPLE-


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("form").submit(function(){
    alert("Submitted");
  });
});
</script>
</head>
<body style="background-color: pink;">
<H1>Welcome to wearewriter.com</H1>
<hr>

<form action="">
  First name: <input type="text" name="FirstName" value="SHIVANI"><br>
  Last name: <input type="text" name="LastName" value="NAVAL"><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

OUTPUT-

Jquery Change() Event

jQuery change() event occurs when the value of an element is changed. It works only on form fields. When the change event occurs, the change () method attaches a function with it to run.

Note: This event is limited to <input> elements, <textarea> boxes and <select> elements.

SYNTAX-

$(selector).change()  

It adds a function to the change event.

$(selector).change(function) 

EXAMPLE-

<!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="utf-8">    
  <title>change demo</title>    
  <style>    
  div {    
    color: red;    
  }    
  </style>    
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    
</head>    
<body style="background-color: pink;">
<H1>Welcome to wearewriter.com</H1>
<P>Jquery change() Event</P>
<hr>  
 <select id="se" name="actors" >    
  <option>Deepika</option>    
  <option selected="selected">kareena</option>    
  <option>Ash</option>    
  <option>Bani</option>    
  <option>Shivani</option>    
  <option>Awantika</option>    
</select>    
<div id="loc"></div>    
 <script>    
$( "select" ) .change(function () {    
document.getElementById("loc").innerHTML="You selected: "+document.getElementById("se").value;  
});  
</script>    
 </body>    
</html>   

OUTPUT-

Jquery Focus() Event

The jQuery focus event occurs when an element gains focus. It is generated by a mouse click or by navigating to it.

The focus() method triggers the focus event, or attaches a function to run when a focus event occur.

Tip: This method is often used together with the blur() method.

SYNTAX-Trigger the focus event for selected elements:

$(selector).focus()

Attach a function to the focus event:

$(selector).focus(function)

EXAMPLE-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $("span").css("display", "inline").fadeOut(2000);
  });
});
</script>
<style>
span {
  display: none;
}
</style>
</head>
<body style="background-color: pink;">
<H1>Welcome to wearewriter.com</H1>

<hr>  
<P>Jquery Focus() Event</P>

 Click into the inputbox<input>

<span>Nice to meet you!</span>
<p>Click in the input field to get focus.</p>

</body>
</html>

OUTPUT-

If you want to see what new in jquery so watch out jquery official website.

Thank you guys to watch my article .

If you have any query regarding JQUERY FORM EVENT so comment on comment section .

Leave a Comment

Show Buttons
Hide Buttons