Change src works randomly

Change src works randomly

Newbie here, using this at new job.
Working with previous code.
I also tried to change the innerHTML of the outer div (outer to the bookButton), which worked, but it stopped the form being submitted,
  1. All we need to do is change an image then submit a form., this is the code that does the change:$(document).ready(function(){
  2.     $('#bookButton').click(function() {
  3.         if($("#checkoutForm").valid() == true) {
  4.             //$("#bookButton").attr("src","images/booking/process-btn.png");
  5.             $(this).attr("src","images/booking/process-btn.png"    );
  6.         }
  7.     });
  8.     });

HTML
  1.     <div id="confirm">
  2.                <input alt="Book button" type="image" src="images/booking/book-btn.png" value="Send It" id="bookButton" name="bookButton" />
  3.             </div>

1, Any ideas as to why the img swap could happen randomly, IE seems to be the best, but not 100%?

When I say rondonly i mean sometimes it does work and sometimes it doesn't unless, I am aiming for FF, IE, Chrome and Safari

2, Also why would the innerHTML change stop the event that is on the div wrapping the HTML that was changed?

Any ideas appriciated.