XForms/Advanced Search

Motivation
You want a simple search function and a separate advanced search options tab.

Source Code


 

 

  



    Google Search Example  Simple <xf:toggle case="simple-search" ev:event="DOMActivate" /> </xf:trigger> <xf:trigger appearance="minimal" class="tab"> <xf:label>Complex</xf:label> <xf:toggle case="advanced-search" ev:event="DOMActivate" /> </xf:trigger> <xf:switch>

<xf:case id="simple-search"> <xf:input ref="instance('search-params')/q" id="search-field"> <xf:label>Search string:</xf:label> <xf:action ev:event="DOMActivate"> <xf:send submission="search-google" /> </xf:action> </xf:input> <xf:submit submission="search-google"> <xf:label>Search</xf:label> </xf:submit> </xf:case>

<xf:case id="advanced-search"> <xf:input ref="instance('adv-search-input-params')/q" id="adv-search-field"> <xf:label>Search string:</xf:label> <xf:action ev:event="DOMActivate"> <xf:send submission="adv-search-google" /> </xf:action> </xf:input>

<xf:input ref="instance('adv-search-input-params')/site" id="site-field"> <xf:label>Site URL:</xf:label> <xf:action ev:event="DOMActivate"> <xf:send submission="adv-search-google" /> </xf:action> </xf:input>

<xf:submit submission="adv-search-google"> <xf:label>Search</xf:label> </xf:submit> </xf:case>

</xf:switch>