Question

I have tried to replace the submit button of a form with an ajax loader as part of my ajax request.

Here is the code i used:

beforeSend: function() {
  $("#submit").replaceWith("<img id='loader' width ='14px' src='../img/loader.gif'>");
},
success: function(data){
  $("#loader").replaceWith("<input id='submit' type='submit' class='button blue' value='Get History'  />");

This works for the first submit, the loader shows then i get the button back on ajax complete but the button no longer submits the form?

EDIT:
Here is the form

    <form id="history" action="temp_history.php" method="post" onsubmit="getHistory();return false;" >
<?php
foreach($_SESSION['contacts'] as $user => $id) {?>
<li class="contactList"><span><input type="checkbox" name="contact[]" id="contact" value="<?php echo $id; ?>" /></span><?php echo $user; ?></li>
<?php } ?>
</div>
</ul>
  <div style="bottom: 0; position: absolute; text-align: left; margin-bottom:10px; margin-left:10px; width: 210px;">
  <input type="text" name="days" id="days" style="border:0; color:#8a8a8a; font-weight:bold; background: url(../img/nav_secondary_bg.png);" readonly="readonly" />
  <div id="slider"></div>
  <input id="submit" type="submit" class="button blue" value="Get History"  />
  <input type="button" class="button grey" value="Clear"  />
  </div>
</form>

Entire Function:

function getHistory() {
    //var contact = $("#contact").val()
    var contact = new Array();
      $("input[@name='contact[]']:checked").each(function() {
        contact.push($(this).val());
      });
    var days = $("#days").val()
    $.ajax({
        type: 'post',
        url: 'temp_history.php',
        data: {contact: contact, days: days},
        context: document.body,
        beforeSend: function() {
            $("#submit").replaceWith("<img id='loader' width ='14px' src='../img/loader.gif'>");
        },
        success: function(data){
            $("#loader").replaceWith("<input id='submit' type='submit' class='button blue' value='Get History'  />");
            var json = jQuery.parseJSON(data);
            var divs = "", tabs = "", counts = 0;

            jQuery("#gMap").gmap3({ action: 'clear' });
            jQuery(".marker").remove();

            jQuery.each(json, function(i, item) {
                var name = item.name;
                var userId = item.data.user;
                jQuery.each(item.data.data, function(i, nav) {
                    var ts = nav.timestamp;
                    var lat = nav.latitude;
                    var long = nav.longitude;

                    if (lat != null && long != null) {
                        addMarker(name, counts = counts + 1, ts, lat, long, userId);
                    }
                });
            })  
        }
  });

}

Answer 1

You will need to re-bind your events after .replaceWith(), as the DOM will class this as a new element with no events attached to it.

Add after:

$("input[type='submit'].button.blue").click(function(){
   getHistory();
});