Change button to image depending to text using jquery?

Question

I've got a checkout page on my online store, and one the fields is a for a Discount Coupon code, next to which is an 'update total' button. The next column shows the discount.

           ---------------    ——————————————
enter code:|             |    |update total|         - $0.00
           ---------------    ——————————————

When the user enters a correct code and presses update the page loads again with the correct discount amount:

           ---------------    ——————————————
enter code:| 1234        |    |update total|         - $10.00
           ---------------    ——————————————

I want the user to see a tick image instead of the button, so they don't get confused and click update again, like this:

           ---------------    
enter code:| 1234        |      tick image           - $10.00
           ---------------

Is it possible to do this with jquery? I guess it would check the amount to see if it was not 0. The html looks roughly like this:

<td>
 <input type='text' class='couponinput' name='coupon_num' id='coupon_num' value='' />
 <input type='submit' class='update-button' value='Update' />
</td>
 <td class="lastcolumn">
 <span id="coupons_amount" class="pricedisplaycart" style="font-weight:bold; color:black;" >-&#163;0.00</span>
</td>

Answer 1

Hide it and insert in image after it (which essentially replaces it)...

$('input[type=submit]').hide().after('<img src="tickImage.jpg" />");