gif spinner doesn't appear when submitting form using ajax

I am trying to add a loading gif to my form when the user clicks the submit button using ajax and I want to also disable the submit button. I have tried it this way but it doesn't work. My button does have an ID of 'submit'

 <script type="text/javascript">                                 
// we will add our javascript code here
jQuery(document).ready(function($) {

    $("#ajax-contact-form").submit(function() {
        var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "contactfinal.php",
            data: str,
            success: function(response) {
 $('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled');
                $('#error').html(response);

            }
        });
        return false;
    });
});
</script>