Latest Announcemnent
New thread

How to add a submit button to search?

Status
Not open for further replies.
B

bxflow

Active Member
4,686
2010
621
30
This is how my search bar looks:

z5jC87.png


You can search for whatever you want but to submit the search you must click the "enter" button on your keyboard, I want to add a Submit button/image right next to the search bar so users can click it instead of having to press "Enter"

I tried to add one but didnt see good results.


Here is the code to call the search bar on the header:
Code: 
<div id="search">
            <form method="post" id="searchform" action="{$baseurl}/index.php" >
                <input type="hidden" name="menu" value="search" />
                <input id="s" class="rounded" type="text" name="query" />
                


            </form>
        </div>

here is the CSS:

Code: 
/* The Search */


    
#search {
    background:url(images/search.png);
    width:283px;
    padding:5px 0px ;
    margin:10px 0px 0px 0px;
    height:50px;
    display:inline;
}
#search form {
    margin: -5px 0px 0px 300px;
    padding: 0;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search p {
    margin: 0;
    font-size: 85%;
}

#s {
    width:285px;
    margin:10px 0px 0px 0px;
    padding: 5px 5px;
    height:16px;
    border:none;
    font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
    color:#333;
    border:1px solid #000;
    background:#F3F3F3;
    display:inline;
}
input#searchsubmit{

    padding: 3px 5px;
    display:inline;
    margin:0px 0px 0px 0px;
    height:26px;
    background:#133E68;
    color:#fff;
    border:none;
}
 
12 comments
PHP: 
<button type="submit" name="search" id="searchbutton">Search</button>

just above the
</form>

change id to the what ever you want and style it accordingly .
 
Code: 
<div id="search">
            <form method="post" id="searchform" action="{$baseurl}/index.php" >
                <input type="hidden" name="menu" value="search" />
                <input id="s" class="rounded" type="text" name="query" />
		<input type="submit" value="search" id="searchsubmit" />

            </form>
        </div>


Just tested it to be sure and it works.
 
snowmanrene said:
Code: 
<div id="search">
            <form method="post" id="searchform" action="{$baseurl}/index.php" >
                <input type="hidden" name="menu" value="search" />
                <input id="s" class="rounded" type="text" name="query" />
        <input type="submit" value="search" id="searchsubmit" />

            </form>
        </div>
Just tested it to be sure and it works.
Click to expand...

hm didn't work for me.. all it does is remove the search bar completely :(
 
try reducing the width of the #s id something to 250 or 200.and put back the search button.
PHP: 
<input id="searchsubmit" type="submit" value="search">
 
dermechove said:
try reducing the width of the #s id something to 250 or 200.and put back the search button.
PHP: 
<input id="searchsubmit" type="submit" value="search">
Click to expand...

:) I guess the size was the problem, worked, thank you very much

by the way what should I edit to change the submit box to the image of my choice?
NabkWo.png


I tried it and it shows the image but also shows the word search all over the icon i added
 
try this one out
Code: 
input#searchsubmit{

    padding: 3px 5px;
    display:inline;
    margin:0px 0px 0px 0px;
    height:26px;
    background-image:url('image url');
    color:#fff;
    border:none;
     text-indent: -999 px;
}



 
Status
Not open for further replies.
Back
Top