Umbraco XSLT search page navigation using input onchange - forms

Question

I have created a pagination input that on change will go to the value entered into the input.
It will detect the page range and allow navigation between those pages in that range.
e.g /image-gallery-album-1.aspx?page=3
<form type="get" onchange="return false">
<div class="pagerUI">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- previous page -->
<xsl:if test="$page > 1">
<td class="pager-prev"><a class="previous" href="{concat('?page=', $page - 1, $qs)}" title="Previous page">‹</a></td>
</xsl:if>
<td>Page</td>
<td><input type="number" name="page" id="page" min="1" >
<xsl:choose>
<xsl:when test="$page=1">
<xsl:attribute name="value">1</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="value"> <xsl:value-of select="$currentPageNumber" /> </xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:attribute name="max"> <xsl:value-of select="$numberOfPages"/> </xsl:attribute>
</input></td>
<td>of <xsl:value-of select="$numberOfPages"/></td>
<!-- next page -->
<xsl:if test="$page * $resultsPerPage < count($matchedNodes)">
<td class="pager-next"><a class="next" href="{concat('?page=', $page + 1, $qs)}" title="Next page">›</a></td>
</xsl:if>
</tr>
</table>
</div>
</form>
However, when I added this to the XSLTSearch code it doesn't work as the URL loses the search string.
So instead of navigating to: /image-search.aspx?search=football&page=3
It navigates to: /image-search.aspx?page=3 Which doesn't display any results on that page as it's missing the search criteria to display the search results.
I tried to change the form and include an "action" that would change the URL to include the search value but I can't include the input value as it's dynamic.
For example with the below form if I enter any value into the input the URL updates to following: /image-search.aspx?search=otbra&page= It's missing the entered number of the input value.
Search form with onchange and action and method post attributes:
<form type="get" onchange="return false">
<xsl:attribute name="method"> <xsl:text>post</xsl:text> </xsl:attribute>
<xsl:attribute name="action"> <xsl:text>?search=</xsl:text> <xsl:value-of select="$search"/><xsl:text>&</xsl:text>page= (input value)</xsl:attribute>
Is there some javascript or some way of detecting the value submitted and parsing it into the search string of the URL?
Any assistance would be appreciated. Cheers, JV

Answer 1

NOTE: As comment on your post says the likely issue is with the $qs variable, however here's an explanation of how you can get Query String values in Umbraco, for reference.
In Umbraco you can retrieve a Query string value in XSLT using umbraco.library
So to retrieve the value of search you would call something like:
<xsl:variable name="searchValue" select="umbraco.library:RequestQueryString('search')"/>
This creates a variable called searchValue which you can then use to re-inject the query string value in your url.
Something like this:
<a class="next" href="{concat('?page=', $page + 1, '&search=', $searchValue)}" title="Next page">›</a>
More information on umbraco.library can be found on the our.umbraco.org site.