ProductCart E-Commerce Solutions Homepage
Forum Home Forum Home > ProductCart > Customizing ProductCart
  New Posts New Posts RSS Feed - Change Search Button "Go" to img
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Change Search Button "Go" to img

 Post Reply Post Reply
Author
Message
fidjiti View Drop Down
Senior Member
Senior Member


Joined: 30-November-2006
Location: United States
Status: Offline
Points: 0
Post Options Post Options   Thanks (0) Thanks(0)   Quote fidjiti Quote  Post ReplyReply Direct Link To This Post Topic: Change Search Button "Go" to img
    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 &gt;&gt;" 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. :)
Back to Top
netprofits View Drop Down
Certified ProductCart Developers
Certified ProductCart Developers


Joined: 05-January-2006
Location: United States
Status: Offline
Points: 22
Post Options Post Options   Thanks (0) Thanks(0)   Quote netprofits Quote  Post ReplyReply Direct Link To This Post 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

Our Site
Back to Top
fidjiti View Drop Down
Senior Member
Senior Member


Joined: 30-November-2006
Location: United States
Status: Offline
Points: 0
Post Options Post Options   Thanks (0) Thanks(0)   Quote fidjiti Quote  Post ReplyReply Direct Link To This Post 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. 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. :)
Back to Top
netprofits View Drop Down
Certified ProductCart Developers
Certified ProductCart Developers


Joined: 05-January-2006
Location: United States
Status: Offline
Points: 22
Post Options Post Options   Thanks (0) Thanks(0)   Quote netprofits Quote  Post ReplyReply Direct Link To This Post 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

Our Site
Back to Top
fidjiti View Drop Down
Senior Member
Senior Member


Joined: 30-November-2006
Location: United States
Status: Offline
Points: 0
Post Options Post Options   Thanks (0) Thanks(0)   Quote fidjiti Quote  Post ReplyReply Direct Link To This Post 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): 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. :)
Back to Top
bottomlineusa View Drop Down
Newbie
Newbie


Joined: 18-August-2007
Location: United States
Status: Offline
Points: 0
Post Options Post Options   Thanks (0) Thanks(0)   Quote bottomlineusa Quote  Post ReplyReply Direct Link To This Post 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!
Back to Top
Justplaying View Drop Down
Newbie
Newbie
Avatar

Joined: 16-August-2007
Location: United Kingdom
Status: Offline
Points: 0
Post Options Post Options   Thanks (0) Thanks(0)   Quote Justplaying Quote  Post ReplyReply Direct Link To This Post Posted: 20-August-2007 at 2:01pm

Hi

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

Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.047 seconds.