Jquery Ajax Form Submit examples using PHP

Jquery Ajax Form Submit examples using PHP

In this Post We Will Explain About is Jquery Ajax Form Submit examples using PHP With Example and Demo.

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Submit A Form Without Page Refresh using jQuery

In this post we will show you Best way to implement How to submit a form using JQuery Ajax and PHP, hear for How to Jquery Ajax Post Example For Submitting AJAX Forms in PHP with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Simple HTML Form Submit

Ajax simple forms are the best way to integral part of web technology form submit today.It makes sending data file or more HTTP requests best way to very easy, no page any refersh as well as reloads and it’s very fast HTML submit form, it can send-receive all the data or information in a various some basic json,html,text or like as many formats such as HTML, JSON or XML parts.

Simple HTML Form Submit

    Name
    
    Email
    
    myweb
    
    

jQuery has some latest various shorthand basic new Methods to jQuery.ajax() method or fun’, such as .get() method, .post() method, .load() method, .getJSON() method, they all accomplish or some basic example below the same thing, but are here more specific to the simple tasks and more require less some basic source code.

Ajax() Methods

$("#live_basic_form").submit(function(event){
    event.preventDefault(); 
    var apiUrl = $(this).attr("action"); 
    var dataSend_methods = $(this).attr("method"); 
    var form_data = $(this).serialize(); 
   
    $.ajax({
        url : apiUrl,
        type: dataSend_methods,
        data : form_data
    }).done(function(data-results){ 
        $("#data-respose").html(data-results);
    });
});

POST() Methods

$("#live_basic_form").submit(function(event){
    event.preventDefault(); 
    var apiUrl = $(this).attr("action");
    var form_data = $(this).serialize(); 
   
    $.post( apiUrl, form_data, function( data-results ) {
      $("#data-respose").html( data-results );
    });
});

GET() Methods

$("#live_basic_form").submit(function(event){
    event.preventDefault(); 
    var apiUrl = $(this).attr("action"); 
    var form_data = $(this).serialize(); 
   
    $.get( apiUrl, form_data, function( data-results ) {
      $("#data-respose").html( data-results );
    });
});

getJSON() Methods

$("#live_basic_form").submit(function(event){
    event.preventDefault(); 
    var apiUrl = $(this).attr("action"); 
    var form_data = $(this).serialize(); 
    $.getJSON( apiUrl , form_data,function( data-results ) {

        $.each( data-results, function(key, val) {
            $("#data-respose").append( val + "
");
        });
    });
});

HTML Multipart/form-data Form Submit using jQuery Ajax

HTML Part

HTML Multipart/form-data Form Submit

    Name
    
    Email
    
    myweb
    
     
    

jQuery Ajax

$("#live_basic_form").submit(function(event){
    event.preventDefault();
    var apiUrl = $(this).attr("action");
    var dataSend_methods = $(this).attr("method"); 
    var form_data = new FormData(this); 
    $.ajax({
        url : apiUrl,
        type: dataSend_methods,
        data : form_data,
        contentType: false,
        cache: false,
        processData:false
    }).done(function(data-results){ 
        $("#data-respose").html(data-results);
    });
});

Submit Ajax Form with a Progress Bar

HTML Part

Submit Ajax Form with a Progress Bar

    Name
    
    Email
    
    myweb
    
    
    


 

jQuery Ajax

$("#live_basic_form").submit(function(event){
    event.preventDefault(); 
    var apiUrl = $(this).attr("action"); 
    var dataSend_methods = $(this).attr("method"); 
    var form_data = new FormData(this);
   
    $.ajax({
        url : apiUrl,
        type: dataSend_methods,
        data : form_data,
        contentType: false,
        processData:false,
        xhr: function(){
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function(event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;
                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
               
                $("#live-progress .progress-bar").css("width", + percent +"%");
            }, true);
        }
        return xhr;
    }
    }).done(function(data-results){ 
        $("#data-respose").html(data-results);
    });
});

CSS Part

/*Progress Bar*/
#live-progress{
    height: 20px;
    border: 1px solid #ddd;
    width: 100%;
}
#live-progress .progress-bar{
    background: #bde1ff;
    width: 0;
    height: 20px;
}

Example

I hope you have Got Ajax Form Submit examples using jQuery And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.