Design comparison
Solution retrospective
JS script work, but I didn't figure it out how to make it work both, submit form and add class without reload the page..
Community feedback
- @Ahmed96MahPosted over 2 years ago
Hello Alexei,
If you mean that you want the user to be able to submit another review without needing to reload the page, then you should set a timeout function to your thankU function (located at line 14 of script.js) as follows:
// notice that you should write const or let before the function name const thankU = () => { let selected = document.querySelector('input[type=radio]:checked'); thankUCard.classList.add('active'); starResult.innerText = selected.value; setTimeout( () => { // add a setTimeout function to your code // Then, remove the 'active' class from the card thankUCard.classList.toggle('active'); }, 2500); // This sets a delay of 2500 millisecond or 2.5 seconds return false; }
So, after the card appears, it will stay there for 2.5 seconds and then disappear which will allow the user to submit another rating.
Hope this helps. If you have another question, don't hesitate to ask.
Have a nice day :)
1@Batareika007Posted over 2 years agoHi Ahmed :) Thank you very much for help, I am very appreciate it !
With your help it's works! but the card disappears after 2.5 sec, and only then the form submitting automatically for some reason it didn't work via
setTimeout
function I use a little different codewindow.setTimeout(function () { mainForm.submit(); }, 2500);
What I wanted to make, that to submit the form and keep the card on the screen. but cant configure how to do it. Maybe it's impossible to make via JS and need some PHP or something else ?
I use
method="get"
in form to see if it submitting, and check the url 'interactive-rating-component/?star=5' .Thanks and have a great 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