Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component challenge

Jiwon Suh 210

@suhjiwon95

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm proud that I finally finished the first project involving JavaScript.

However, I have a question when submitting a button.

Q. How do I prevent a submission when any of the rating buttons were clicked? I wanted to write a code that prevents loading the Thank you page if a user does not click any of those rating buttons.

If you know the solution, please leave a comment.

Thank you!

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

SUGGESTIONS : 💡

  • "How do I prevent a submission when any of the rating buttons were clicked ?"
  • Yeah there's a native solution which is available in JavaScript, the solution is e.preventDefault() method!
  • In JavaScript, the e.preventDefault() method is used to prevent the default behavior of an event. When an event occurs, such as clicking on a link or submitting a form, the browser executes its default action associated with that event. However, by calling e.preventDefault(), you can override this default behavior and define your own custom actions.
  • Let's break it, The e represents the event object that is passed as an argument to event handlers. By invoking preventDefault() on the event object, you stop the event from performing its default action. (the submitting behaviour)
  • Now you learned how to tackle this default form submission, congrats!

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1

Jiwon Suh 210

@suhjiwon95

Posted

@0xAbdulKhalid Thank you for the suggestion.

I was actually going to use e.preventDefault() if a user did not click any of rating buttons. However, I couldn’t find a way to check if they clicked the button or not.

If you know how to approach this, please let me know.

Thank you

0

@0xabdulkhaliq

Posted

@suhjiwon95 Glad you found it helpful ! 🤠

  • And along with that i can understand what you're asking, We can resolve that issue by adding a disable attribute to submit button

  • Then add click event listener to the rating buttons and whenever the rating are clicked then the disable attribute will be removed from the submit button.

  • So the user cannot submit the rating until he selected any one of the rating provided there.

  • I can't explain everything here, but you can take a look at my submission where i used this method to tackle the problem you mentioned

  • Here's the submission

.

Hope am helpful!

Marked as helpful

1
Jiwon Suh 210

@suhjiwon95

Posted

@0xAbdulKhalid I see! I didn't think about it that way. Thank you so much. It was very helpful :D

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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