jQuery Form Submit On Button Click

jQuery submit form on button click example; Through this tutorial, i am going to show you how to submit form on button click using jQuery submit() method.

jQuery Form Submit On Button Click Example

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 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 1:- How to submit Form using jQuery on Button Click

<!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() === "laratutorials" ) {  
    $( "span" ).text( "Submitted Successfully." ).show();  
    return;  
  }  
  $( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );  
  event.preventDefault();  
});  
</script>  
</body>  
</html> 

Recommended jQuery Tutorial

Be First to Comment

Leave a Reply

Your email address will not be published.