1. what is change event ?

Ans : change एक प्रकार का form event hai | जिसका use form के किसी भी field (like input , select , textarea ) की value को change करने के लिए किया जाता है।

Syntax :

.focus

2. what is submit event ?

Ans : submit एक प्रकार का form event hai | जिसका use form को submit करने के लिए किया जाता है।

Syntax :

submit

3. what is invalid event ?

Ans : invalid एक प्रकार का form event hai | जिसका use form को सभी field को check करने के लिया किया जाता है की कोई field invalid तो नहीं है ।

Syntax :

.invalid

Example

HTML Code


   <html>	
	<!--head section-->
   <head>
      <title>Official Website Teach Coders</title>
		  <meta name="description" content="Teach Coders" />
		  <meta name="keywords" content="Teach Coders" />
   </head>

   <body>

<h3 style="text-align:center;">Contact Form</h3>

<div class="container">
    <div class="pastecode"></div>
  <form>
    <label for="fname">First Name</label>
    <input type="text" class="teach" value="input your first name" name="firstname" value="">
    
    <label for="lname">Last Name</label>
    <input type="text" class="teach" value="input your last name" name="lastname">


    <label for="lname">E-mail</label>
    <input type="email" class="teach" value="input your email" name="lastname" required>

    <label for="country">Country</label>
    <select class="teach"  name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
      

    <label for="subject">Subject</label>
    <textarea class="teach" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>

</div>



   </body>
</html>

  
----------------------------------------------------------
 EXAMPLE 1 : (change event) change value of select box 
----------------------------------------------------------
<script>
 var my_element = document.querySelector("select.teach");
 my_element.addEventListener("change", changefunction);
    function changefunction(){
      var storevalue = my_element.value;
      document.querySelector(".pastecode").innerHTML = storevalue;
}
</script>

----------------------------------------------------------
 EXAMPLE 2 : (change event) change value of input box 
----------------------------------------------------------
<script>
  var my_element = document.querySelector("input.teach");
  my_element.addEventListener("change", changefunction);
  function changefunction(){
    var storevalue = my_element.value;
    document.querySelector(".pastecode").innerHTML = storevalue;
  }
</script>

----------------------------------------------------------
 EXAMPLE 3 : (submit event) form sumbmit
----------------------------------------------------------
<script>
  var my_element = document.querySelector("form");
  my_element.addEventListener("submit", submitfunction);
  function submitfunction(){
    alert("thank you")
  }
</script>

----------------------------------------------------------
 EXAMPLE 4 : (invalid event) 
----------------------------------------------------------
<script>
  var my_element = document.querySelectorAll("input.teach")[2];
  my_element.addEventListener("invalid", changefunction);
  function changefunction(){
   alert("please vill valid input your E-mail")
  }
</script>

Css Code


<style>
     
     
</style>