jQuery Form Submit On Button Click

jQuery Form Submit On Button Click

jQuery submit form on button click; Through this tutorial, you willl learn how to submit form on button clikc using jQuery submit() method.

jQuery Form Submit On Button Click

  • jQuery submit() Event Method
  • Syntax of jQuery submit() Event Method
  • Parameters of jQuery submit() Event Method
  • Example jQuery Form Submit On Button Click

jQuery submit() Event Method

jQuery form submit event occurs when a form is submitted. And also jQuery form submits 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 of jQuery submit() Event Method

$(selector).submit()  

It triggers the submit event for selected elements.

$(selector).submit(function)  

Parameters of jQuery submit() Event Method


Parameter

Description

Function

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

Example jQuery Form Submit On Button Click

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> 

Recommended jQuery Tutorials

AuthorAdmin

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, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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