How to Submit a Form Without Page Refresh Using jQuery?

Today, We want to share with you submitting form using jquery.In this post we will show you jquery get form data after submit, hear for submit form using jquery on button click we will give you demo and example for implement.In this post, we will learn about jquery form submit example with an example.

How to Submit a Form Using jQuery?

You can use the submit() method to submit an HTML form (i.e. <form>]) using jQuery code. also The submit event occurs when a HTML form is submitted.This method can only apply on the form elements.

here you can Showing success if the form is submitted correctly. simple HTML processing ajax forms with jquery demo.

Let’s get started processing our form.
Example 1: jquery submit form

// It is simply
$('form').submit();

// However, you're most likely wanting to operate on the form data
// So you will have to do something like the following...
$('form').submit(function(e){
	// Stop the form submitting
  	e.preventDefault();
  	// Do whatever it is you wish to do
  	//...
  	// Now submit it 
    // Don't use $(this).submit() FFS!
  	// You'll never leave this javascript function & smash the call stack! :D
  	e.currentTarget.submit();
});

Example 2: submit form jquery browser check

var $saveUserFrom = $('#saveUserFrom');

if(! $saveUserFrom[0].checkValidity()) {
  // If the form(uploadedmoviefrm) is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $saveUserFrom.find(':submit').click();
}

Example 3: jQuery AJAX form submit

// jQuery ajax form submit example, runs when form is submitted
$("#saveUserFromID").submit(function(e) {
    e.preventDefault(); // prevent actual form submit
    var uploadedmoviefrm = $(this);
    var url = uploadedmoviefrm.attr('action'); //get submit url [replace url here if desired]
    $.ajax({
         type: "POST",
         url: url,
         data: uploadedmoviefrm.serialize(), // serializes uploadedmoviefrm input
         success: function(data){
             console.log(data);
         }
    });
});

Example 4: put form action jquery

$('#button1').click(function(){
   $('#uploadedmoviefrmId').attr('action', 'page1');
});


$('#button2').click(function(){
   $('#uploadedmoviefrmId').attr('action', 'page2');
});

Example 5: when a form is subbmited jquery

 $("#saveUserFrom").submit(function(e) {
 })

How to use jQuery to Show/Hide a Form on Click?

index.html

<button type="button" id="formButton">Toggle Form!</button>

<form id="form1">
  <b>First Name:</b> <input type="text" name="firstName">
  <br><br>
  <b>Last Name: </b><input type="text" name="lastName">
  <br><br>
  <b> Age:</b>
  <br>
  <input type="radio" name="age" value="adolescent"> 0 - 19 years
  <br>
  <input type="radio" name="age" value="mid"> 20 - 59 years
  <br>
  <input type="radio" name="age" value="senior"> 60 + years
  <br> <br>
  <b>Preferred Color:</b>
  <select name="color">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="pink">Pink</option>
  </select>
  <br><br>
  <b>Comment:</b>
  <br>
  <textarea name="comment">
    Enter your comment here
  </textarea>
  <br><br>
  <button type="button" id="submit">Submit</button>
</form>

jQuery Code

$(document).ready(function() {
  $("#formButton").click(function() {
    $("#form1").toggle();
  });
});

CSS Code

html {
  font-family: Arial, sans-serif;
  max-width: 500px;
  margin: auto;
  color: #666;
}

form {
  padding: 15px;
  border: 1px solid #666;
  background: #fff;
  display: none;
}

#formButton {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

I hope you get an idea about jquery form submit example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.