Multiple forms on one query

Hello,

I have a little problem with my project, actuall I'm stuck on it.

The problem is that I have two forms:
#1 Search form on top site - submit after click on submit button:

  • title (text input) query from URL
  • categories (multiselect)
  • location (places)

#2 Filtering form in sidebar - autosubmit after change:

  • categories (multiselect) - automatic submit after check the checkbox
  • some filter (multiselect)

I would have possibility to use URL for filtering and searching, but if I submit form1 with title="test" I lost my query variables from form2.
What is the best solution for this situation?

I'm just starting my adventure with wappler, so I would like to learn from more experienced users how to best do it with this tool.

Thank you in advance for your help.

Someone could help?

Hi @Bartek,
You could update the values in the Query Manager (assuming you have set them up) on change and this would change your URL to show //example.com/?title=sometitle&categories=somecategory&somefilter=filteredvalue and then use these values as values for the filtering form in the sidebar and the title, setting default values as a fallback if no values are passed... Or you could store the values in Data Store or even cookies.

Wappler is very flexible so allows you to have scope and choice.

Benefit of using query variables would allow a User to pass on results via a link where as if stored in either cookie or Data Store they would obviously be local to the User themselves and not be able to be passed on as a link.

1 Like

Query Manager documentation:

https://docs.wappler.io/t/filtering-database-query-with-an-url-parameter/2868

Cookies and Sessions documentation:

https://docs.wappler.io/t/cookies-sessions-and-local-storage/3996

Unfortunately there is no documentation for Data Store basic usage (only for use case scenarios) but it works much the same as all the other storage types for local and session etc. You define a Data Store and its variables and can then insert/inject a value in to them.

1 Like

Thank you for your answer, your suggestions seem correct, but after calling submit on individual forms, it removes the query from the second form and the form of the URL query changes
I have global variables, query manager and server connect configured

Form1: input title (text)
Form2: input offertype (multiple checkboxes)

If I press "search" submit button next to title input field the query is ?title=sometext
If I press "search" submit button next to checkboxes in another form, the query is ?offertype=1

I would like to achieve the effect that when submitting form 1 or the second form, the character is the same if the fields are filled, i.e. if form1 is sent it should also contain the parameters from the second form, unfortunately I can't deal with this with wappler, that's all I managed to achieve this duplicates hidden inputs in each form, which I think is an incorrect solution

I have to run in to the city for a couple of hours but when I get back will share an example with you. With Wappler you don't have to submit the form you can do all the query work Client side live and direct so changes are instantly updated on your page without the need for opening a new page.

If no one else responds in the meantime I won't be too long.

1 Like

I will be very grateful to you for this, but is it then possible for the URL to also change along with the contained values ​​of individual variables?

What I care most about is the proper creation of a URL with parameters that allow you to go directly "from the street" to the page containing the search list while maintaining all parameters (in this case, title and checkbox), so I'm trying the GET method

I think I did as you suggested. Namely, I turned off the "submit" function in the form buttons and assigned a dynamic event to replace the values ​​after clicking, at the moment it seems to be working properly, it also edits the URL address

Thank you very much

1 Like