XForms/Advanced Search

Motivation

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events">
    <title>Google Search Example</title>
    <style type="text/css">  
         body {font-family: Helvetica, sans-serif; }        
    </style>
    <style>
        @namespace xf url("http://www.w3.org/2002/xforms");
        /* all the attributes of each tab, except the background color */
        #horiz-tab-menu xf|trigger {
        border-left: black solid 1px;
        border-top: black solid 1px;
        border-right: black solid 1px;
        border-bottom: 0px;
        font-weight: bold;
        font-family: Helvetica, sans-serif;
        font-size: .9em;
        margin-right: 5px;
        padding: 3px;
        /* the following only works under FireFox */
        -moz-border-radius: .5em .5em 0em 0em;
        border-radius-topright: .5em;
        border-radius-topleft: .5em;
        }
        /* the attributes of each div inside of a case */
        xf|switch xf|case {
        position: relative;
        width: 400;
        border: solid black 1px;
        border-top: solid black 0px;
        border-right: solid black 1px;
        border-bottom: solid black 1px;
        padding: 5px;
        background-color: silver;
        }

    </style>
    <xf:model>
        <xf:instance xmlns="" id="search-params">
            <data>
                <hl>en</hl>
                <q />
            </data>
        </xf:instance>

        <xf:instance xmlns="" id="adv-search-input-params">
            <data>
                <hl>en</hl>
                <q>Xforms</q>
                <site>http://en.wikibooks.org/wiki/XForms</site>
            </data>
        </xf:instance>

        <xf:instance xmlns="" id="adv-output-input-params">
            <data>
                <hl>en</hl>
                <q />
            </data>
        </xf:instance>

        <xf:bind nodeset="instance('adv-output-input-params')/q"
            calculate="concat(
            instance('adv-search-input-params')/q, '+',  instance('adv-search-input-params')/site)" />
 
        <xf:bind nodeset="instance('adv-output-input-params')/hl"
            calculate="instance('adv-search-input-params')/hl"/>
        
        <!-- Send the search parameters to the Google search engine and replace this entire form with the results -->
        <xf:submission id="search-google" method="get" action="http://www.google.com/search"
            replace="all" ref="instance('search-params')" separator="&amp;" />

        <xf:submission id="adv-search-google" method="get" action="http://www.google.com/search"
            replace="all" ref="instance('adv-output-input-params')" separator="&amp;" />

        <!-- put the cursor in the first field when the form becomes ready -->
        <xf:action ev:event="xforms-ready">
            <xf:setfocus control="search-field" />
        </xf:action>
    </xf:model>
    <body>
        <h1>Google Search Example</h1>
        <div id="horiz-tab-menu">
            <xf:trigger appearance="minimal" class="tab">
                <xf:label>Simple</xf:label>
                <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>
        </div>
        <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>
                <br />
                <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>
                <br />
                <xf:submit submission="adv-search-google">
                    <xf:label>Search</xf:label>
                </xf:submit>
            </xf:case>

        </xf:switch>
    </body>
</html>
Discussion

Next Page: Pie Chart | Previous Page: Dynamically Load JavaScript
Home: XForms