jQuery AJAX Submit form serialize PHP MySQLi

jQuery AJAX Submit form serialize PHP MySQLi

Today, We want to share with you jQuery AJAX Submit form serialize PHP MySQLi.
In this post we will show you Submit form serialize using AJAX and jQuery | form serialize, hear for how to send data to MySQL with AJAX + jQuery + PHP we will give you demo and example for implement.
In this post, we will learn about php – Sending data to database using Jquery/ajax with an example.

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Submit form serialize using AJAX and jQuery

Read Also:  PHP OOP CRUD MVC Framework Tutorial

Example 1 : submitting html form via jquery ajax() and serialize()

$(function(){
        $("#my_form_id").click(function(e_data){
            e_data.preventDefault();
			//call ajax and form submitting
            $.ajax({
                    url:'do_submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(json_result){
                        $("#data_responsr").text(json_result);
                    }
            });
        });
    });

Example 2 : jquery form serialize ajax post data

<form method="get" id="my_form_id" action="post.html">
    <input type="hidden" name="field1" value="value1" />
    <input type="hidden" name="field2" value="value2" />
    <select name="status">
         <option value=""></option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
    </select>
</form>

$("select").change(function(){
    $.get("/post.html?" + $(this).parent("form").find(":input").serialize()); 
});

or 

$(document).ready( function() {
  var data_form = $('#my_form_id');
  data_form.find('select:first').change( function() {
    $.ajax( {
      type: "POST",
      url: data_form.attr( 'action' ),
      data: data_form.serialize(),
      success: function( json ) {
        console.log( json );
      }
    } );
  } );

} );

Example 3 : Full Example of jquery Form serialize

<!DOCTYPE html>
<html>
<head>
<title>Submit form serialize using AJAX and jQuery - step By Step</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#all_getdata").text($("form").serialize());
    });
});
</script>
</head>
<body>
<h2></h2>
<form action="">
Post Name: <input type="text" name="postname" value="Angularjs"><br>
Post Desc: <input type="text" name="postDesc" value="Meanjs"><br>
Post id: <input type="text" name="postid" value="9898"><br>
Post cat: <input type="text" name="postcat" value="js"><br>
</form>

<button>Click to all input values / Serialize form values fetch</button>

<p>Form Submit Data</p>
<hr/>
<h3 id="all_getdata"></h3>
<hr/>
<h1>Solution of AngularJs All Problems For Pakainfo.com</h1>
<h3>
<a href="https://www.pakainfo.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of Pakainfo.com </a>
</h3>
</body>
</html>