I'm working on a form,

<form id="myform" class="form">  
      </form>

that gets submitted to the server using jquery ajax.

How can I refresh the form on success to show the updated form information and add a spinner until the form loads? here is my html and jquery snippet

 <div class="container">

       <div class="page-header">
         <div class="span2">
            <!--Sidebar content--> 
            <img src="img/emc_logo.png" title="EMC" >
            </div>
             <div class="span6">
        <h2 class="form-wizard-heading">Configuration</h2>
             </div>
        </div>
      <form id="myform" class="form">  
      </form>


    </div> <!-- /container -->


    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Configuration Changes</h3>
    <p><span class="label label-important">Please review your changes before submitting. Submitting the changes will result in rebooting the cluster</span></p>
    </div>
    <div class="modal-body">

    <table class="table table-condensed table-striped" id="display"></table>
    </div>
    <div class="modal-footer">
    <button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button id="save" class="btn btn-primary">Save changes</button>
    </div>
    </div>

//Jquery part

$(document).ready(function () {
    $('input').hover(function () {
        $(this).popover('show')
    });
    // On mouseout destroy popout 
    $('input').mouseout(function () {
        $(this).popover('destroy')
    });

    $('#myform').on('submit', function (ev) {
        ev.preventDefault();

        var data = $(this).serializeObject();
        json_data = JSON.stringify(data);

        $('#myModal').modal('show');

        $.each(data, function (key, val) {
            var tablefeed = $('<tr><td>' + key + '</td><td id="' + key + '">' + val + '</td><tr>').appendTo('#display');
        });

        $(".modal-body").html(tablefeed);

    });

    $("#cancel").click(function () {

        $("#display").empty();
    });

    $(function () {
        $("#save").click(function () {
            // validate and process form here  
            alert("button submitted" + json_data);

            $.ajax({
                type: "POST",
                url: "somefile.json.",
                data: json_data,
                contentType: 'application/json',
                success: function (data, textStatus, xhr) {
                    console.log(arguments);
                    console.log(xhr.status);
                    alert("Your form has been submitted: " + textStatus + xhr.status);
                },

                error: function (jqXHR, textStatus, errorThrown) {

                    alert(jqXHR.responseText + " - " + errorThrown + " : " + jqXHR.status);
                }
            });

        });
    });

});