Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

Image as a submit button; without using ImageFormAction


Reply


3 Posts   1803 Views

Avatar
Mohammed

Community Member, 25 Posts

16 December 2009 at 3:07pm

Edited: 16/12/2009 3:21pm

Hi everyone,

If you notice on the very top right hand of this page, you'll see a search field that makes use of the background image to "submit" the search form. If you take a look at the source code, you'll all see that they did not use ImageFormAction.

I've spent many hours trying to figure out how silverstripe.org was able to accomplish this. I tried to mimic this, however I come across the same problem every time-the "Search" title (or label?) keeps appearing, right on top of the image (the background CSS image for the div). What am I doing wrong?? How did silverstripe.org manage to hide the text (title/label) from appearing above the image, yet still allow the title/label to appear when you hover your mouse over the image.

I tried adding #searchbox label {display: none;} to the css, but that didn't seem to help.

Simply speaking, I would like to know how to code the same search form submit mechanism as the one found at the top of this page.

Here is the source code I have:

<div id="searchbox">
      <form id="SearchForm_SearchForm" action="/home/SearchForm" method="get" enctype="application/x-www-form-urlencoded">
   <fieldset>
      <legend></legend>
         <div id="Search" class="field text "><label class="left" for="SearchForm_SearchForm_Search">search</label><div class="middleColumn"><input type="text" class="text" id="SearchForm_SearchForm_Search" name="Search" value="Search" /></div></div>
      <input class="action" id="SearchForm_SearchForm_action_results" type="submit" name="action_results" value="Search" title="Search" />
   </fieldset>
</form>
      </div>

This is the CSS i'm using to style the form:

#searchbox{
   position:relative;}

#searchbox form{
   position: absolute;
   top: 0px;
   right: 0px;
   width: 147px; height: 24px; margin-top: 10px; color: #7e7e7e; padding-left: 15px; padding-right: 30px; padding-top: 9px; background: url(../images/searchfield.png) no-repeat; font-size: 13px;
}
#searchbox form label {
      display: none;
   }
#searchbox label {
      display: none;
   }
#searchbox form input.text {
      background: none;
      border: 0;
      margin: 0;
      width: 140px;
      position: absolute;
      top: 10px;
      right: 34px;
      color: #666;
   }
#searchbox form input.action { display: block; float: right; clear: none; background: none; cursor: pointer; overflow: hidden; width: 24px; height:34px; margin-right: -24px; margin-top: -12px; border: none;}

This is the code I'm using for the search, located in my pages' class Page_Controller extends ContentController:

function SearchForm() {
       $searchText = isset($this->Query) ? $this->Query : 'Search';
       $fields = new FieldSet(
          new TextField("Search", "search", $searchText)
       );
       $actions = new FieldSet(
          new FormAction('results', 'Search')
       );
       return new SearchForm($this, "SearchForm", $fields, $actions);
   }

Avatar
Webdoc

Community Member, 333 Posts

16 December 2009 at 8:25pm

#searchbox form input.action { width: 34px;
height: 24px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(image.gif) no-repeat top right;}

in css

Avatar
Mohammed

Community Member, 25 Posts

17 December 2009 at 8:58am

Edited: 17/12/2009 9:00am

I was able to get it working by adding some padding in the CSS:

#searchbox form input.action {
      display: block;
      float: right;
      clear: none;
      background: none;
      cursor: pointer;
      overflow: hidden;
      width: 41px;
      height:34px;
      margin-right: 0px;
      margin-top: -12px;
      padding-top: 34px; /* Should match hight value-->for hiding label */   
      border: none;}