Jump to:

1999 Posts in 1408 Topics by 613 members

Form Questions

SilverStripe Forums » Form Questions » Image as a submit button; without using ImageFormAction

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1738 Views
  • Mohammed
    Avatar
    Community Member
    25 Posts

    Image as a submit button; without using ImageFormAction Link to this post

    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);
       }

  • Webdoc
    Avatar
    Community Member
    332 Posts

    Re: Image as a submit button; without using ImageFormAction Link to this post

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

    in css

  • Mohammed
    Avatar
    Community Member
    25 Posts

    Re: Image as a submit button; without using ImageFormAction Link to this post

    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;}

    1738 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.