Umbraco XSLT Search by selected keyword checkbox

Question

I've created a keyword's property type using the textbox multiple data type.

The keywords are then seperated into a list of words or phrases seperated by commas.

I've wrapped the keywords in A tag with the href linking to my search page, and including the value of the keyword so that all nodes with the same keyword will display in my search.

I want to add an option where a user can select from checkboxes with the value of the keyword, and submit a search so all checked keywords are included in the search.

I need help with figuring out how to get the checked values of the list of keyword checkboxes to submit and display the results on my seach page.

Here is what I have so far, which doesn't submit and I can't find where to add the values of the checkboxes:

<xsl:if test="string($currentPage/keywords) != ''">

<!-- get the contents of the textbox multiple, with commas -->
<xsl:variable name="textWithBrs" select="umbraco.library:ReplaceLineBreaks($currentPage/keywords)"/>

<!-- replace commas with pipes so you can use Split -->
<xsl:variable name="textWithPipes" select='umbraco.library:Replace($textWithBrs, ", ", "|")'/>

<!-- split into an array of items and output as unordered list -->
<xsl:variable name="items" select="umbraco.library:Split($textWithPipes, '|')"/>
<ul>
  <xsl:for-each select="$items/value">
    <li>
      <input type="checkbox" value="true" keyword="{.}" id="{.}" name=""/>
      <a>
      <xsl:attribute name="href"> <xsl:text disable-output-escaping="yes">/imagery/image-search.aspx
      <![CDATA[?]]>
      search=</xsl:text> <xsl:value-of select="." /> </xsl:attribute>
      <xsl:attribute name="title"> <xsl:value-of select="."/> </xsl:attribute>
      <xsl:value-of select="."/> </a> </li>
  </xsl:for-each>
</ul>
<input type="submit" value="Search" id="btnSearchBottom" name="" onclick="location.href='/imagery/image-search.aspx?search=otbra'" />
</xsl:if>

Any assistance would be greatly appreciated.

Cheers, JV

I've made some edits and now have it semi-working. However my Umbraco template has a form wrapping my content. Which I think is what is causing some issues.

In my testing I've had a form wrapping my XSL code. When I click on the "submit" button nothing happens, but if I have a duplicate of the same code the second list of checkboxes will be able to submit. Also when I make multiple selections the search results try to look for "one,two" which don't return any results (/image-search.aspx?search=one&search=two). It should search for "one two" (/image-search.aspx?search=one%20two).

My code with the repeated form:

<div style="display:none;">
  <form name="input" action="/imagery/image-search.aspx" method="get">
    <ul>
      <xsl:for-each select="$items/value">
        <li>
          <input type="checkbox" name="search" value="{.}"/>
          &nbsp; <a href="/imagery/image-search.aspx?search={umbraco.library:UrlEncode(.)}" title="{.}"> <xsl:value-of select="."/> </a> </li>
      </xsl:for-each>
    </ul>
    <input type="submit" value="Submit"/>
  </form>
</div>
<div>
  <form name="input" action="/imagery/image-search.aspx" method="get">
    <ul>
      <xsl:for-each select="$items/value">
        <li>
          <input type="checkbox" name="search" value="{.}"/>
          &nbsp; <a href="/imagery/image-search.aspx?search={umbraco.library:UrlEncode(.)}" title="{.}"> <xsl:value-of select="."/> </a> </li>
      </xsl:for-each>
    </ul>
    <input type="submit" value="Submit"/>
  </form>
</div>

Then I tried the following code, which didn't require to wrap the list in a form. Again multiple selections don't work, but also the only result returned is the first input value in the list (in this case 'one').

<ul id="checkboxes">
  <xsl:for-each select="$items/value">
    <li>
      <input id="{.}" type="checkbox" name="search" value="{.}"/>
      &nbsp; <a href="/imagery/image-search.aspx?search={umbraco.library:UrlEncode(.)}" title="{.}"> <xsl:value-of select="."/> </a> </li>
  </xsl:for-each>
</ul>
<input name="searchbutton" class="button" value="Search" type="reset" onClick="location.href='/imagery/image-search.aspx?search=' + $('#checkboxes input').attr('value')" />

So I need help with which option to use, and how to include multiple selections in the search result.

Answer 1

A few notes

• You seem to be unaware of attribute-value-templates. They replace the need for <xsl:attribute> in most cases. Use curly braces to evaluate expressions in attributes.
• Always (!) URL-encode values that you put into an URL. Compare tha <a href="..."> below.
• When a form field does not have a name, its value will not be submitted by the browser. An ID on the other hand is not necessary.
• Using <xsl:if test="string($anything) != ''> is not necessary. A non-empty string is truthy, so <xsl:if test="$anything"> is sufficient.
• Don't use onclick in the submit button if you want your form to transmit. Use the <form action="..."> parameter to determine where form values should be transmitted to. Or use JavaScript, but completely avoid inline script handlers like "onclick". There should be no JS in your markup at all.

XSL code

<xsl:if test="$currentPage/keywords">
  <xsl:variable name="textWithBrs" select="
    umbraco.library:ReplaceLineBreaks($currentPage/keywords)
  "/>
  <xsl:variable name="textWithPipes" select="
    umbraco.library:Replace($textWithBrs, ', ', '|')
  "/>
  <xsl:variable name="items" select="
    umbraco.library:Split($textWithPipes, '|')
  "/>
  <ul>
    <xsl:for-each select="$items/value">
      <li>
        <input type="checkbox" value="true" keyword="{.}" name="keywords"/>
        <a href="/imagery/image-search.aspx?search={umbraco.library:UrlEncode(.)}" title="{.}">
          <xsl:value-of select="."/>
        </a>
      </li>
    </xsl:for-each>
  </ul>
  <input type="submit" value="Search" id="btnSearchBottom" />
</xsl:if>