Design comparison
Solution retrospective
Hello guys! This is my first challenge here, and I enjoyed it! :D
There is something I'm unsure of: What's the common way to avoid redirection after submitting a form?
- When I was coding the sucess area, it kept directing me to another page or refreshing after clicking the submit button.
- To avoid this, I add a
ifram
tag right afterform
. Is this way correct?
<form target="iframe_to_remain_same_page">...</form>
<iframe id="id_iframe" name="iframe_to_remain_same_page" style="display:none;">
</iframe>
:) peace!
Community feedback
- @gmagnenatPosted over 2 years ago
Hello, congrats on completing the challlenge ! To avoid redirection to another page when submitting the form you can add in your submit function something to prevent the default behavior of the form. In your function, pass the event and add : event.preventDefault();
example :
const handleForm = (e) => { e.preventDefault(); // rest of your form function }
I hope it helps.
Marked as helpful1@GretaLiPosted over 2 years ago@gmagnenat Hello, thank you for your nice reply! It works! :D
Thought
e.preventDefault()
can be only applied toa
tag. (( I was wrong.))Now I'm thinking if the form's value will send to back-end, cuz I noticed from URL that didn't add "/?rating=5" after submit.
Trying to figure out~
0@gmagnenatPosted over 2 years ago@GretaLi Welcome :) happy it works.
Regarding backend, it all depend how you want to handle this. In a single page application (in javaScript), you'll probably have an api call in your submit function that will write the data to your backend. You don't need specifically the /?rating=5 value in your url. You already got that data that you are using on your thankyou state.
Marked as helpful0@GretaLiPosted over 2 years ago@gmagnenat Ahh! I get the idea. Thank you! I appreciate your help very much. :) Have a nice day~
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord