I am trying to change the submit button to a submit image. It seems that if the input type for the submit button is changed to an image, and the form does not validate onsubmit (if the user does not enter all of the required fields), it will refresh the page and clear all of the data the user input while registering.

Works (but then cant have image as button):
<td align="left" class="submit-btn"><input type="button" onclick="javascript:doRegister(this.form);" name="Add22" value="Submit" class="btn"/>

Bug:
<td align="left" class="submit-btn"><input type="image" src="assets/templates/[template]/images/reg-submit.png" onclick="javascript:doRegister(this.form);" name="Add22" value="Submit" class="btn"/>

FIX:

Use CSS to set a background for the image
.registration-submit{
background-image: url(../images/reg-submit.png); /* 117px x 26px */
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 26px;
width: 117px;
vertical-align: middle; /* align the text vertically centered */
}