this is a test: submit_form_with_ajax_without_pagerefresh.php

<?php
if(isset($_REQUEST["phone"]))
{
    exit(json_encode($_REQUEST)); // answer the client;
    // exit — Output a message and terminate the current script
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
</style>
<meta name="author" content="user">
<meta name="editor" content="aptana3">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000"
    vlink="#FF0000">
    <div id="contact_form" style="width: 300px; position: relative; float: left;">
        <form id="form_contact" onsubmit="javascript: return false;">
            <fieldset>
                <label for="name" id="name_label">Name</label>
                <input type="text" name="name" id="name" size="30" value="" class="text-input" />

                <label for="email" id="email_label">Return Email</label>
                <input type="text" name="email" id="email" size="30" value="" class="text-input" />

                <label for="phone" id="phone_label">Return Phone</label>
                <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />

                <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
            </fieldset>
        </form>
    </div>
<!-- put scripts at the end -> maximaize load speed -->
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
/* converts a form into a json compatible javascript object */
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

/* read all input fields of a form, assemble target.php?key=value url and submit via jqxhr request. */
function submitForm(form,ResultHandler) {

    var data = null;
    var url = "submit_form_with_ajax_without_pagerefresh.php?";

    url += $(form).serialize();

    var jqxhr = $.post(url, data, function(response, responseText, jqXHR) {
        if (response) {
            // process json result/response
            var response_array = jQuery.parseJSON(response);

            // if not empty
            if(response_array)
            {
                // execute ResultHandler
                ResultHandler(response_array);
            }
        }
    });
}

$(document).ready(function() {

    // When you click upon the button, you simply submit the form to the back-end.
    // To override this behavior you should override submit action on the form. Old style:

    // <form onsubmit="javascript: return false;">

    // New style:

    // $('form').submit(function() { return false; });

    // And on submit you want to perform an ajax query:

    $('#form_contact').submit(function() {
        submitForm('#form_contact',function(result)
                {
                    alert("Server answers: "+JSON.stringify(result)); // do something with the result;
                }
            );
        return false; // we don't want our form to be submitted
    });
});
</script>
</body>
</html>

inspired by: http://stackoverflow.com/questions/16661380/submitting-a-form-via-ajax

admin