Customizing ProductCart - Change Search Button "Go" to img

Print Page | Close Window

Change Search Button "Go" to img

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=651
Printed Date: 21-April-2025 at 1:27pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Change Search Button "Go" to img

Posted By: fidjiti
Subject: Change Search Button "Go" to img
Date Posted: 09-February-2007 at 12:17pm

I would like to change the search button "go" in the pc/smallsearchbox.asp file. Here's the code it has right now.

<link href="pcHeaderFooter.css" rel="stylesheet" type="text/css">

<form action="showsearchresults.asp" name="search" method="get" class="pcForms">
<div align="center">
    <input type="hidden" name="pageStyle" value="<%=bType%>">
    <input type="hidden" name="resultCnt" value="10">
    <input name="keyword" type="Text" size="25">
    <input type="submit" name="submit" value="Go >>" id="submit" >
    </div>
<div class="pcSmallText">
    <div align="center"><a href="search.asp">advanced search</a></div>
</div>
</form>

Any help would be greatly appreciated. I'm sure it's an easy img="" code but I just don't know where I'd put it. Sorry for the lack of knowledge here.

-------------
Linda - I wish I knew ASP.
To view my ever evolving site click the "www" button below. :)

Replies:

Posted By: netprofits
Date Posted: 09-February-2007 at 9:21pm

Replace the following line:


<input type="submit" name="submit" value="Go &gt;&gt;" id="submit" >

with this code:


<a href="#"><img onclick=javascript:document.search.submit(); name="btnGo" src="images/btnSearch.jpg" width="70" height="30" border="0" alt=""></a>

Make sure you change the image name, width and height to match your image. The a href tag just forces the cursor to change when you mouse over the image. The javascript submits the form when the image is clicked.

-------------
NetProfits Internet Consulting

Certified ProductCart Developer

http://www.nicwebdesign.com" rel="nofollow - Our Site

Posted By: fidjiti
Date Posted: 10-February-2007 at 8:24pm

netprofits, has anyone ever told you, that you're awesome? Because you are! check out the site search on the top left. http://www.fidjiti.com - fidjiti.com

1 concern: If I type in the keyword and press ENTER then it searches properly. But if I type in the keyword and press TAB then ENTER it does nothing (by nothing i mean it only highlights the "go" button but doesn't actually return any results, but I do see a "#" at the end of the URL). Is it supposed to do that? I would like it to search on the TAB and ENTER too.

Thanks again for your help. :)

-------------
Linda - I wish I knew ASP.
To view my ever evolving site click the "www" button below. :)

Posted By: netprofits
Date Posted: 10-February-2007 at 8:58pm

Thanks for the compliment.

Try this code instead of the previous code:


<INPUT type="image" name="search" src="search.gif" border="0">

Replace "search.gif" with the name of your image.

-------------
NetProfits Internet Consulting

Certified ProductCart Developer

http://www.nicwebdesign.com" rel="nofollow - Our Site

Posted By: fidjiti
Date Posted: 10-February-2007 at 9:45pm

Awesome, it worked! Not that I ever doubted you. :)

But just a note to anyone else planning on doing this. In order to have the image show up as you've deisgned it with no border when selected, you can't have any borders in your CSS in the "form" section. You'll have to make sure you edit the following CSS styles in the /pc/pcStoreFront.css file.
#pc FormsInput: border set to 0 and no color.
#pc FormsInput Focus: border set to 0 and no color.

Otherwise you'll get a border around your image. But I don't think it looks that bad.
see here (I only chose to make a border on "Focus" because that way people know where they are while filling out forms): http://www.fidjiti.com - www.fidjiti.com
To test it, make sure you enter a key word then press TAB and see how my button shows the border, if you don't like that make sure to set the Focus to "0" and no color. :)

Thanks again for the awesome snipet of code.

-------------
Linda - I wish I knew ASP.
To view my ever evolving site click the "www" button below. :)

Posted By: bottomlineusa
Date Posted: 19-August-2007 at 12:55pm

Hi,

I'm very glad to see this post on the borders around images. However, I can't seem to get rid of them. I've changed the/pc/pcStoreFront.css per your instructions but it is not working.   Here is my revised code:

    pcForms input {
   border: 0;
   background-color: #F7F7F7;
   font-size: 11px;
   padding: 2px 3px 2px 3px;
   }

    .pcForms input:focus {
        border: 0;
    }

Any help would be greatly appreciated.   The borders do not look good on my site.
Thank you!

Posted By: Justplaying
Date Posted: 20-August-2007 at 2:01pm

I can replace the word go for an image easily but I cant align the input box and the image horizontally.

Any ideas?

Thanks

Neil