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:  jQuery AJAX POST using PHP Tutorial with 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

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:  jQuery Disable enable Selector Examples
  2. Read Also:  jQuery Ajax GET & POST REQUEST Methods PHP MySQLi
  3. Read Also:  Display JSON Data from database using php using jquery ajax
  4. Read Also:  javascript get current time
  5. Read Also:  How To Fix Laravel Specified Key Was Too Long Error?
  6. Read Also:  Angularjs Selectors component - queryselector
  7. Read Also:  PHP Ajax Form Validation without page refresh
  8. Read Also:  Redirect from one website url to another url
  9. Read Also:  Autocomplete Textbox using jQuery, PHP and MySQLi
  10. Read Also:  Create Dynamic Image Slider using PHP with jQuery
CLOSEX