Wix Studio Form with Search Button

Ask the community
,
1

Is it possible to add a search button to a form designed in Wix Studio Form Builder and return results to a separate page?

I have created a form with two dropdowns where the second dropdown options are filtered based on the first dropdown selection. I want to add a search button that generates results from a database, in a separate page, for the specified options.

2

Sure. Use query parameters to pass your dropdown values to the second page.

Use .to() to navigate the user from the first page to the second with the query parameters: to - Velo API Reference - Wix.com

Then use queryParams on the second page to read those query parameters: queryParams - Velo API Reference - Wix.com

1 Like
3

Thank you Anthony.

I am a novice at coding but I understand the concept you suggested so I’ll play around with the code and let you know how it goes. Thanks again.

4

Hello Community,

I am building my search form but I have not yet got to the point of sending search results to another page @anthony provided assistance with.

I have a cascading dropdown form where the values in the second dropdown populate depending on the selection in the first dropdown. The second dropdown is also enabled when a selection is made in the first dropdown. However, depending on the selection in the first dropdown (country), the second dropdown (state) is not applicable.

Is there a way to allow the second dropdown to become enabled only when necessary and remain disabled otherwise?

Thank you in advance

5

Hello @anthony ,

I did as you suggested with sending search results to a separate page and I have been successful getting directed to the results page but only a ‘no results’ message is showing. I cannot get any results to show even if they exist in the cms.

This is the code on the results page:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
    const url = wixLocation.url;
    const query = url.split('?')[1];
    const params = new URLSearchParams(query);
    const resultsJSON = params.get('results');
    const results = JSON.parse(resultsJSON);

  	$w('#resultsRepeater').data = results;

    	if (!results || results.length === 0) {
        	$w('#resultsRepeater').hide();
        	$w('#noResultsMessage').show();
    	} else {
        	$w('#resultsRepeater').show();
        	$w('#noResultsMessage').hide();
    }
});

Not sure where I am going wrong

6

You feed your repeater with data, but you do not tell your repeater to get ready and read data when repeater is ready. If you expect that this will be done by a dataset-connection (i assume you have connected your repeater with a dataset), then you are wrong.
If you feed your repeater by generated CODE, then you should also continue to go the coding way.

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

$w.onReady(function () {
    const url = wixLocation.url;
    const query = url.split(‘?’)[1];
    const params = new URLSearchParams(query);
    const resultsJSON = params.get(‘results’);
    const results = JSON.parse(resultsJSON);

    $w('#resultsRepeater').data = results;
	if (!results || results.length === 0) {
    	$w('#resultsRepeater').hide();
    	$w('#noResultsMessage').show();
	} else {
    	$w('#resultsRepeater').show();
    	$w('#noResultsMessage').hide();
    }

    $w('#resultsRepeater').onItemReady(($i, iData, index)=>{console.log(iData);
        $i('#repTextElement').text = iData._id;
        $i('#repTextElement').text = iData.title;
        //....all further elements inside your repeater......

        $i('#repButtonElement').onClick((e)=>{console.log(e.target.id+'-clicked');
            //your further code here......
        });
        //your further code here......
    });
});
1 Like
7

Hello @CODE-NINJA,

I tried your suggestion up to this point:

$w(‘#resultsRepeater’).onItemReady(($i, iData, index)=>{console.log(iData);
$i(‘#repTextElement’).text = iData._id;
$i(‘#repTextElement’).text = iData.title;
//…all further elements inside your repeater…

and I am getting the data to populate in the repeater. Thank you for that.

However, I have several concerns/questions:

  1. How do I link to an image?

  2. I am not sure what this part is referring to

$i(‘#repButtonElement’).onClick((e)=>{console.log(e.target.id+‘-clicked’);
//your further code here…
});
//your further code here…
});

  1. The data still isn’t filtering, I am only getting the no results message

Apologies for any trouble, this is my first time at programming.

8

$i('myImageElementIDHere').src = iData['YourImageDbFieldHere'];

  1. this was an example of how to implement a BUTTON into your repeater.

  2. Like i already told you before → do not expect to much from a DATASET, since you are going the coding way now. Where is the code for filtering? I can’t see it. If you did not code it, then it will also not work.

And still you did not answer my question → did you use/connect a DATASET ?
Is this why you do expect the filtering to be happen ?

And if you have used a DATASET → where is the INITIALIZATION of your dataset ???

$w('#dataset1').onReady(()=>{....});

Questions over questions. :grin: