sandbox_ajax_forms.js

    // -- mobileinit event --
    // -- this code is executed once, when jquery mobile is loaded (and must be placed before jqm is loaded)
    // -- this is where you can change default options or behavior
    $(document).bind('mobileinit', function() {
        console.log('mobileinit event');
        //$.mobile.page.prototype.options.domCache = true;
    });


    $(function() {


            console.log('jquery document ready function');


            $(document).on('pageinit', '#formPage', function(){

                $(document).on('click', '#submit', function() { // catch the form's submit event

                    console.log('#submit click handler');

                    if($('#name').val().length > 0 && $('#email').val().length > 0 && $('#memory').val().length > 0){

                        console.log('passed basic validation');

                        //var that = $(this),
                        contents = $('#form').serialize();

                        console.log('contents');
                        console.log(contents);


                        // Send data to server through ajax call
                        // action is functionality we want to call and outputJSON is our data


                        $.ajax({
                            url: 'https://someserver.com/av/mobile/sandbox_ajax_form.php',
                            dataType: 'json',
                            type: 'post',
                            data: contents,
                            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(data) {
                                console.log(data);
                                if(data.success){
                                    alert('Hello '+data.result);
                        }else{
                            alert('Did not get a good result');
                        }

                            },
                            error: function (request,error) {
                                // This callback function will trigger on unsuccessful action
                                alert('Network error has occurred please try again!');
                            }
                        });


                    } else {
                        console.log('failed basic validation');
                        alert('Please fill all nececery fields');
                    }
                    return false; // cancel original event to prevent form submitting
                });
            });



            // -- pagebeforechange event --
            // -- this code is executed every time ANY page (cached or new) is about to be loaded, BEFORE the page is displayed/loaded
            // -- this is where you can see what page was requested,  stop the request, or alter the request
            $(document).on( "pagebeforechange", function( event, data ){
                if ( typeof data.toPage === "string" ) {
                    console.log('pagebeforechange event - ALL pages');

                    console.log(data);

                    // .. do stuff here
                }
            });

            // -- pageinit event that fires for SPECIFIC PAGE ONLY --
            // -- this code is executed only once upon initital page load (or if it is no longer in the cache)
            $(document).on("pageinit", "#formPage", function() {
                console.log('pageinit event - #formPage only');
                // .. do stuff for example page one here


            });


            // -- pageshow event --
            // -- this code is executed every time ANY page is shown (cached or new)
            // -- this is where you can manipulate the contents of the page being shown - think of it as JQM's version of jquery's $(function(){ .. }
            $(document).on( "pageshow", function(){
                console.log('pageshow event - ALL pages');
                // .. do stuff here
            });

            // -- pageshow event that fires for SPECIFIC PAGE ONLY --
            // -- the second parameter targets the id value of the page div used in the body section, aka: <div data-role="page" id="example_page_one" ..> .. </div>
            // -- this code is executed every time the 'example_page_one' page is loaded (cached or new)
            // -- we include code for all the different pages at once in the head because jqm will only every process the head .. /head content ONCE and never again
            $(document).on("pageshow", "#formPage", function() {
                console.log('pageshow event - #example_page_one only');
                // .. do stuff for example page one here
            });

    });