Passing Data in Fresh
As a context, I'm currently making a quiz-like page.
I have a page that GET a quiz_id when opened.
In the page I fill some inputs as the answer.
After that, I want to submit the answer, along with quiz_id to get the solution from other table.
Since Fresh uses <form> to send data, then how to send the quiz_id?
Should I just make a hidden input?
10 Replies
you can interupt normal form submition logic by preventing default.
caputure the event in onSubmit and
e.preventDefault()
And then your custom logic to send data along with quiz_id as post post request normally.
to go to the next question, should I do it with Partial?
I didn't get you. What do you mean by partial here?
if you are talking about these
https://fresh.deno.dev/docs/concepts/partials#enabling-partials
I am not aware of Fresh Framework.
Partials | Fresh docs
Partials allow areas of a page to be updated without causing the browser to reload the page. They enable optimized fine grained UI updates and can be used to do client-side navigation.
I would suggest adding
quiz_id as hidden input so it is submitted with the form. No need for extra JS.After I submitted the form with POST, I want to GET the result (correct / wrong) in the same page without refreshing the entire page, what should I do?
so like to update only some section, maybe like partial I think
I was thinking about these possibilities:
1. Handle entire logic in the POST handler => return result via response of the POST request.
2. Send answer with POST handler => GET page again to get the result.
For the logic, it's like:
1. Get the question.
2. Fill in the answer.
3. Submit the form.
4. Match answer to solution.
5. Return if it's correct / wrong.
6. Render the result without refresh.
7. Clear state, move on to the next question.
In this case, there are couple of ways.
1. Go all in with JS by intercepting the submit event on the form, and use
fetch to submit instead. Using the response to update the page.
2. Use something like HTMZ to update part of the page after form submission (through iframe technique).
Sorry for walking you through these choices. I'm all about doing thing with as little JS as possible and taking advantage of what HTML can already provide.
Which is kinda a weird thing to say in a Deno's forum 😄Fresh has Partials to update only sections on the page. The use case you're describing is exactly what they're built for
Partials | Fresh docs
Partials allow areas of a page to be updated without causing the browser to reload the page. They enable optimized fine grained UI updates and can be used to do client-side navigation.
Thanks a lot guyss
To use Partial after submitting form with native POST handler, we redirect to Partial inside the handler?