Solved

Why does changing submit button to image break this form?

Posted on 2011-09-28
4
454 Views
Last Modified: 2012-05-12
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?

Thanks
0
Comment
Question by:elliottbenzle
  • 3
4 Comments
 
LVL 13

Accepted Solution

by:
NUKIT earned 500 total points
Comment Utility
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...
0
 
LVL 13

Expert Comment

by:NUKIT
Comment Utility
First I would check to see if there already is a #aiContactSafeSendButton declaration in the css already.
0
 
LVL 4

Author Closing Comment

by:elliottbenzle
Comment Utility
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 */
}
0
 
LVL 13

Expert Comment

by:NUKIT
Comment Utility
Ah, you beat me to it...I was going to post more code to show you an example...
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now