Replace a submit button with a static image?

I have very little knowledge on javascript but somehow managed to get an Ajax rating system working. The page display a voting symbol (submit) that increases the vote of a particular item by one. Once the XML response is sent back a JS function runs that displays a success message. Although what I want is no text but the image submit button to be replaced by a static image, so that the visitor can't click again.

<script type="text/javascript">
  
  addEvent(window, 'load', init, false);

  function init() {
      if (!Sarissa || !document.getElementById) return;
      
      var formElements = document.getElementsByTagName('form');
      for (var i = 0; i < formElements.length; i++) {
          if (formElements[i].className.match(/\bajaxify\b/)) {
              addEvent(formElements[i], 'submit', submitRating, false);
          }
      }
  }
  
  function submitRating(e) {
      /* Cancel the submit event, and find out which form was submitted */
      knackerEvent(e);
      var target = window.event ? window.event.srcElement : e ? e.target : null;
      if (!target) return;
      
      /* Check if this form is already in the process of being submitted. 
       * If so, don't allow it to be submitted again. */
      if (target.ajaxInProgress) return;
      
      /* Set up the request */
      var xmlhttp =  new XMLHttpRequest();
      xmlhttp.open('POST', 'rate_now.php', true);
      
      /* The callback function */
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4) {
              if (xmlhttp.status == 200)
                  addRatingFeedback(xmlhttp.responseXML, target);
              else
                  target.submit();
          }
      }
      
      /* Send the POST request */
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlhttp.send('rating=' + target.elements['rating'].value+'&id='+target.elements['id'].value);
      
      /* Add temporary feedback that the request has been sent */   
      var loadingImg = document.createElement('img');
      loadingImg.src = 'working.gif';
      target.getElementsByTagName('p')[0].appendChild(loadingImg);
      target.ajaxInProgress = true;
  }
  
  function addRatingFeedback(responseXML, target) {
      var loadingImg = target.getElementsByTagName('img')[0];
      loadingImg.parentNode.className += ' success';
      var feedbackText = 'Your vote of'+ responseXML.getElementsByTagName('rating')[0].firstChild.data+'has been added';
      var feedbackSpan = document.createElement('span');
      feedbackSpan.className = 'ajaxresponse';
      feedbackSpan.appendChild(document.createTextNode(feedbackText));
      loadingImg.parentNode.replaceChild(feedbackSpan, loadingImg);

      // Free up the form to go again
      target.ajaxInProgress = false;
      
      // Disable form inputs
      target.getElementsByTagName('select')[0].disabled = true;
      target.getElementsByTagName('input')[0].disabled = true;
  }
  
  </script>

Code (markup):

The form:

<form action="./ajaxless-submit.php" method="post" class="ajaxify">
<p>
<input type="hidden" name="rating" value="5" />
<input type="hidden" name="id" value="<? echo $row[id]; ?>" />
<input name="submit" type="image" src="starrating.gif" alt="Bump Vote!" /></p>
</form>

Code (markup):

any help will be appreciated!

 

In submitRating(e) function, add:

target.elements['id'].disabled = true;

Code (markup):

Anywhere in the function after "if (!target) return;" should be fine.