jQuery Form Submit() Event On Button Click Example

jQuery Form Submit() Event On Button Click Example

Here learn jQuery form submit event by example. jQuery form submit event occurs when a form is submitted. And also jQuery form submit event can only be used on HTML elements.

jQuery submit()

If the user submit the form, then the submit event is sent to the form data to the server. This event can only be used on HTML elements.

This event can only be used on HTML elements. The submit () method triggers the submit event or appends the function to run when the submitted event occurs.

Syntax

$(selector).submit()  

It triggers the submit event for selected elements.

$(selector).submit(function)  

Parameters of submit() event


Parameter

Description

Function

It is an optional parameter. It is used to specify the function to run when the submit event is executed.

Example of jQuery submit()

Let’s see an example of jquery submit form on button click event with demonstrate jQuery submit().

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jquery submit form on button click event</title>  
  <style>  
  p {  
    margin: 0;  
    color: blue;  
  }  
  div,p {  
    margin-left: 10px;  
  }  
  span {  
    color: red;  
  }  
  </style>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
<p>Type 'test' to submit this form finally.</p>  
<form action="javascript:alert( 'success!' );">  
  <div>  
    <input type="text">  
    <input type="submit">  
  </div>  
</form>  
<span></span>  
<script>  
$( "form" ).submit(function( event ) {  
  if ( $( "input:first" ).val() === "javatpoint" ) {  
    $( "span" ).text( "Submitted Successfully." ).show();  
    return;  
  }  
  $( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );  
  event.preventDefault();  
});  
</script>  
</body>  
</html> 

You may like

  1. How to Get the Current Page URL in jQuery
  2. jQuery Ajax Get() Method Example
  3. get radio button checked value jquery by id, name, class
  4. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  5. jQuery Get Data Text, Id, Attribute Value By Example
  6. Set data attribute value jquery
  7. select multiple class in jquery
  8. How to Remove Attribute Of Html Elements In jQuery
  9. How to Checked Unchecked Checkbox Using jQuery
  10. jQuery removeClass & addClass On Button Click By E.g.
  11. Get and Set Input, Select box, Text, radio Value jQuery

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

Leave a Reply

Your email address will not be published. Required fields are marked *