jQuery Mobile: How to correctly submit form data

Question

This is a jQuery Mobile question, but it also relates to pure jQuery.

How can I post form data without page transition to the page set into form action attribute. I

Answer 1

Intro

This example was created using jQuery Mobile 1.2. If you want to see recent example then take a look at this article or this more complex one. You will find 2 working examples explained in great details. If you have more questions ask them in the article comments section.

Form submitting is a constant jQuery Mobile problem.

There are few ways this can be achieved. I will list few of them.

Example 1 :

This is the best possible solution in case you are using phonegap application and you don't want to directly access a server side php. This is an correct solution if you want to create an phonegap iOS app.

index.html

    
    
    
    
        
    
    


    

        

            
Login Page
        

        

            

                

                    

                        Enter your username:
                        
                    
                                  
                    
                                      
                        Enter your password:
                         
                    
                    
                
            
                              
        

        


        
    
    

        

            

        

        


        

        

            
Page footer
        
    

check.php :

{'username'}; // Get username from object
    //$password = $formData->{'password'}; // Get password from object

    // Lets say everything is in order
    echo "Username = ";
?>

index.js :

$(document).on('pagebeforeshow', '#login', function(){  
        $(document).on('click', '#submit', function() { // catch the form's submit event
        if($('#username').val().length > 0 && $('#password').val().length > 0){
            // Send data to server through ajax call
            // action is functionality we want to call and outputJSON is our data
                $.ajax({url: 'check.php',
                    data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation
                        type: 'post',                   
                    async: true,
                    beforeSend: function() {
                        // This callback function will trigger before data is sent
                        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                    },
                    complete: function() {
                        // This callback function will trigger on data sent/received complete
                        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                    },
                    success: function (result) {
                            resultObject.formSubmitionResult = result;
                                        $.mobile.changePage("#second");
                    },
                    error: function (request,error) {
                        // This callback function will trigger on unsuccessful action                
                        alert('Network error has occurred please try again!');
                    }
                });                   
        } else {
            alert('Please fill all nececery fields');
        }           
            return false; // cancel original event to prevent form submitting
        });    
});

$(document).on('pagebeforeshow', '#second', function(){     
    $('#second [data-role="content"]').append('This is a result of form submition: ' + resultObject.formSubmitionResult);  
});

var resultObject = {
    formSubmitionResult : null  
}