Why does changing submit button to image break this form?

Page: http://triadtestsite.com/mainstreet/index.php?option=com_aicontactsafe&view=message&layout=message&pf=1&Itemid=106

On this contact form I have a submit button which I want to change to an image. The code for this button currently looks like this: <input type="submit" id="aiContactSafeSendButton" value="' . JText::_('COM_AICONTACTSAFE_SEND') . '" style="float:left; margin:2px;" />

When I try to turn it into an image the contact form no longer submits. Below is the new code for the button that breaks the form.

<input type="image" src="images/send-button.jpg" id="aiContactSafeSendButton" value="' . JText::_('COM_AICONTACTSAFE_SEND') . '" style="float:left; margin:2px;" />

Any ideas on what is causing this or a workaround?

Who is Participating?
Andrew DerseConnect With a Mentor IT ManagerCommented:
Can you try this?

Instead of putting the src="images/send-button.jpg" in the input tag...

Why not put it in the template.css as this:

#aiContactSafeSendButton {
background-image: url('images/send-button.jpg');

Open in new window

Or something similar to that...
Andrew DerseIT ManagerCommented:
First I would check to see if there already is a #aiContactSafeSendButton declaration in the css already.
elliottbenzleAuthor Commented:
Thanks! That did it. The final code looked like this after a little tweeking:

#aiContactSafeSendButton {
  width: 150px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(../../../images/send-button.jpg) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
Andrew DerseIT ManagerCommented:
Ah, you beat me to it...I was going to post more code to show you an example...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.