How can I use Form variables in SPA pages

Wappler General How To
#1

Hello @Teodor ,

I have created test SPA and I dont know how can I use get method inside form

router_client_side
router_client_side.jpg528×593 30.9 KB

router_client_side
router_client_side.jpg528×593 30.9 KB

form
form.jpg1337×663 132 KB

but resullt : http://localhost:8082/search.aspx?q=luisa
I want to “http://localhost:8082/search/q/luisa/”

can you guide me please ?

#2

HI Serhat,

Forms can not rewrite their own post url before submitting, so this is not how it works.

Form data is either posted as GET - and appended to the url as query params - or submitted as POST and then it is included in the form post data.

This is how HTML5 form works.

So what you can define as route simple the search path - to hide at least the extension, like:

path:  /search
url:  search_results.aspx

and then submit your form to just action="search"

So the form with method GET - will submit to ```search?q=xxx````

within your search_results page - you can use the reqular query params as usual.

Note URL rewriting is used primarily for making nice readable urls for your pages and detail pages.
Search forms and paging are still send with regular query parameters

#3

Thank you @george but I need more info from you …

I have created SPA page. My page also home and search names have 2 view . I added a searcbox to my index page .The search box is currently working with GET method . How can I do this without using get method ? because the url looks bad.

my Url Currently Looks : http://localhost:8082/search?q=luisa

I want URL like this : http://localhost:8082/search/query/luisa

can you guide me please

#4

Hi Serhat,

Please read my previous post - you really don’t need any SPA for form submissions.

App connect forms already submit data through Ajax and give you back the results so you can show them to the user.

If you really want to use SPA, read more about the background and what is it all about: