[solved] Using radio buttons in AjaxSearch form to choose which section of site to search

486 Posts

nickf08 Reply #1, 12 years, 3 months ago

Hello,

I am using Evo 1.0.14 with the inbuilt AjaxSearch 1.10.1 and I am stuck with a radio button problem.

Does anyone know how to use radio buttons in an AjaxSearch form to choose which section of a site to search?

I have found how to search just a particular section of a site using the &parents and the &depth parameters on the search page. This works fine to limit to just one section of the site.
Eg - &parents=`26` &depth=`2`

But what we'd like to do is give site users the ability to search from one of 3 sections of the website when using the AjaxSearch form - see attached image for a visual. Eg -
Rods: &parents=`26` &depth=`2`
Pods: &parents=`72` &depth=`3`
Sitewide: (no parent / no depth limit)

Any ideas on how to do this?

Thanks in advance.

My AjaxSearch calls are currently as follows...

header:
[!AjaxSearch? &landingPage=`8` &ajaxSearch=`0` &showResults=`0` &showIntro=`0`
&tplInput=`as-tpl-searchbox`
!]

search page:
[!AjaxSearch? &showInputForm=`0` &ajaxSearch=`0` &showIntro=`0` &pagingType=`0` &highlightResult=`0` &grabMax=`20` &minChars=`2` 
&rank=`pagetitle:80,introtext:60,description:40,alias:20,content:30` 
&tplGrpResult=`as-tpl-grpResult`
&tplResult=`as-tpl-result`
&tplResults=`as-tpl-results`
&tplPaging0=`as-tpl-paging`
!]

&tplInput:
<div id="search">
 <form id="[+as.formId+]" action="[+as.formAction+]" method="post">
  <input type="hidden" name="advsearch" value="[+as.advSearch+]" /> 
  <input type="submit" name="submit" value="" title="Click to Search" />
  <div><input type="text" name="search" value="" title="Enter terms" placeholder="[+as.inputValue+]"/></div>
  <div class="options">
   <label><input name="option[]" type="radio" value="Option 1" /><span>rods</span></label>
   <label><input name="option[]" type="radio" value="Option 2" /><span>pods</span></label>
   <label><input name="option[]" type="radio" value="Option 3" checked/><span>sitewide</span></label>
  </div>
 </form>
</div>

[ed. note: nickf08 last edited this post 12 years ago.]

Web design Adelaide
http://gocreate.com.au

486 Posts

nickf08 Reply #2, 12 years, 3 months ago

Beulah... Beulah...

No ideas?

Maybe I position the radio buttons outside the Ajaxsearch search form and use them to toggle between three chunks - with each chunk containing an Ajaxsearch form with slightly different parameters. That's not maybe the neatest way.

I would love to hear some better ideas from experienced users.

Web design Adelaide
http://gocreate.com.au

486 Posts

nickf08 Reply #3, 12 years ago

I ended up using this method: I located the radio buttons outside the Ajaxsearch search forms and used the radio buttons with jQuery to toggle between three chunks - with each chunk containing an Ajaxsearch form with slightly different &landingPages, &parents and &depth parameters as relevant.

There is probably a more elegant way to achieve this but this method works fine in our situation.

Each AjaxSearch call looks similar to the below:

header (&landingPage changed as relevant):
[!AjaxSearch? &landingPage=`8` &ajaxSearch=`0` &showResults=`0` &showIntro=`0`
&tplInput=`as-tpl-searchbox`
!]

search page (&parents and &depth changed as relevant):
[!AjaxSearch? &showInputForm=`0` &ajaxSearch=`0` &showIntro=`0` &pagingType=`0` &highlightResult=`0` &grabMax=`20` &minChars=`2`
&rank=`pagetitle:80,introtext:60,description:40,alias:20,content:30`
&parents=`26` &depth=`2`
&tplGrpResult=`as-tpl-grpResult`
&tplResult=`as-tpl-result`
&tplResults=`as-tpl-results`
&tplPaging0=`as-tpl-paging`
!]

The skeleton html showing the wrapper div, the 3 x &tplInput forms (which are inserted as chunks) and the Radio options looks like so:

<div id="search">

 <form id="[+as.formId+]" action="[+as.formAction+]" method="post">
  <div id="srchALT1" class="searching">
   <input type="hidden" name="advsearch" value="[+as.advSearch+]" />
   <input type="submit" name="submit" value="" title="Click to Search" />
   <div><input type="text" name="search" value="" title="Enter terms" placeholder="[+as.inputValue+]"/></div>
  </div>
 </form>
  
 <form id="[+as.formId+]" action="[+as.formAction+]" method="post">
  <div id="srchALT2" class="searching">
   <input type="hidden" name="advsearch" value="[+as.advSearch+]" />
   <input type="submit" name="submit" value="" title="Click to Search" />
   <div><input type="text" name="search" value="" title="Enter terms" placeholder="[+as.inputValue+]"/></div>
  </div>
 </form>
  
 <form id="[+as.formId+]" action="[+as.formAction+]" method="post">
  <div id="srchSTD" class="searching">
   <input type="hidden" name="advsearch" value="[+as.advSearch+]" />
   <input type="submit" name="submit" value="" title="Click to Search" />
   <div><input type="text" name="search" value="" title="Enter terms" placeholder="[+as.inputValue+]"/></div>
  </div>
 </form>

 <div id="srchOPT">
  <form>
   <label class="first"><input type="radio" name="option[]" data-rel="srchALT1" /><span>rods</span></label>
   <label class="middle"><input type="radio" name="option[]" data-rel="srchALT2" /><span>pods</span></label>
   <label class="last"><input type="radio" name="option[]" data-rel="srchSTD" checked /><span>sitewide</span></label>
  </form>
 </div>

</div>

The jquery switching code looks like so:

$('#srchOPT input[type="radio"]').click(function() {
  $('.searching').hide();
  $('#' + $(this).data('rel')).show();
});

CSS used to hide the search boxes but show the standard search box:

#search .searching { display: none; }
#search #srchSTD.searching { display: block; }

[ed. note: nickf08 last edited this post 12 years ago.]

Web design Adelaide
http://gocreate.com.au

1,198 Posts

Nicola (Banzai) Reply #4, 12 years ago

Nice solution. Bookmarked

Free MODx Graphic resources and Templates www.tattoocms.it
-----------------------------------------------------

MODx IT www.modx.it
-----------------------------------------------------

bubuna.com - Web & Multimedia Design