anggoran
anggoran4mo ago

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
webbdays
webbdays4mo ago
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.
anggoran
anggoran4mo ago
to go to the next question, should I do it with Partial?
webbdays
webbdays4mo ago
I didn't get you. What do you mean by partial here?
webbdays
webbdays4mo ago
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.
Esente
Esente4mo ago
I would suggest adding quiz_id as hidden input so it is submitted with the form. No need for extra JS.
anggoran
anggoran4mo ago
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.
Esente
Esente4mo ago
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 😄
marvinh.
marvinh.4mo ago
Fresh has Partials to update only sections on the page. The use case you're describing is exactly what they're built for
marvinh.
marvinh.4mo ago
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.
anggoran
anggoran4mo ago
Thanks a lot guyss To use Partial after submitting form with native POST handler, we redirect to Partial inside the handler?