Home » jQuery AJAX Submit form serialize PHP MySQLi

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.

Read Also:  PHP Laravel delete files from Public Folder

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

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>


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Remove Last Character from String in JavaScript
  2. Read Also:  Number Expressions using Angular Example
  3. Read Also:  FPDF generate PDF Files using PHP dynamically Step By Step
  4. Read Also:  Jquery Ajax Form Submit examples using PHP
  5. Read Also:  Concat Multiple MySQL Rows GROUP_CONCAT
  6. Read Also:  Angularjs Bar Rating Component and demo
  7. Read Also:  Dynemically HTML table from AJAX response using PHP
  8. Read Also:  jQuery Ajax GET & POST REQUEST Methods PHP MySQLi
  9. Read Also:  QueryException in laravel 6 Exception Handling
  10. Read Also:  Http Post and Get Web Api Calls using Angularjs

Leave a Comment

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