how to create a step by step search site?

ClassiBase classifieds script Forums Tips and tricks how to create a step by step search site?

This topic contains 2 replies, has 1 voice, and was last updated by  Georg Hirmer 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #2303 Reply


    my facts:
    – no categorys
    – no locations
    – all information are in custom fields (most in checkboxes)
    – required searchable fields are all based on checkboxes

    what I need:
    I need a step by step search, distributed on three pages. In each page an other search. In the end the result.

    Page 1 – In which country do you start your trip? (DE, EN, GR, …)
    Page 2 – In which country do you stop your trip? (IT, TR, SP, …)
    Page 3 – what kind of travel typ you prefer? (train, car, on foot, …)

    Page 4 – Result of searching

    (sorry for my bad english)

    #2335 Reply


    We checked your website and see that you used search form. We wrote a javascript that will convert your search widget to step by step search as you described.

    Our javascript is shown below. Copy it to “Settings” -> “Header / footer” page in “Custom footer” field. It removes search text field, hides all options, displays only one step at a time, add navigation button “Back” and “Next”, displays “Submit” button at the end and check before submitting if none of checkboxes selected then prompts to select some values.

    function step_by_step_search(){
    	var $form = $('.widget_search form:not(.step_by_step_search) input#q').parents('form:first');
    		// mark form as updated
    		// set each p as a step
    		// hide search text input
    		$('input#s',$form).parent('p').removeClass('step').prepend('<input type="button" id="next" value="Next" />').prepend('<input type="button" id="back" value="Back" />');
    		// hide all steps
    		//set next prev functions 
    			if(!$('p.step input:checkbox:checked',$form).length)
    				alert('Please select some values.');
    				return false;
    			return true;
    function step_by_step_search_step(){
    	var $form = $(this).parents('form:first');
    	var $p_current = $('p.step:visible',$form);
    	var val=$(this).attr('id');
    			// show next step
    			$next = $'p.step');
    			// show prev step
    			$next = $p_current.prev('p.step');
    	$p_current = $('p.step:visible',$form);
    	// no next then show submit 
    	// if no prev then hide back
    	return false;

    Try it and let us know how it goes.

    #2377 Reply

    Georg Hirmer

    It works perfekt 🙂
    Thanks for the good solution

Viewing 3 posts - 1 through 3 (of 3 total)
Reply To: how to create a step by step search site?
Your information:

This entry was posted on by .