Interactive Component [Tailwind, CSS, JS]

Community feedback

• 

  P

  Jason Merrell•30

  @jason-merrellPosted over 1 year ago

  Whenever you want to grab input from a user, you want to make sure to use the form element. I know it seems like more complexity in the HTML you have to build, but you get upside in JavaScript when it comes to getting those values when they go to submit -- particularly with the native FormData() class. It's designed to easily grab all of the input values on the form and you can use the .entries() method to generate an object with key/value pairs.

  Here's the event listener I have on my submit button:

  const handleFormSubmit = async (e) => {
      e.preventDefault();
      const form = e.target.closest('form');
      const formData = new FormData(form);
      const data = Object.fromEntries(formData.entries());
      console.log(data);
      // const response = await fetch('/api/submit', {
      //     method: 'POST',
      //     headers: {
      //         'Content-Type': 'application/json'
      //     },
      //     body: JSON.stringify(data),
      // });
      // const result = await response.json();
      // console.log(result);
      // if (result.success) {
      //     alert('Thank you for your submission!');
      //     form.reset();
      // } else {
      //     alert('Something went wrong, please try again later.');
      // }
      handleFormResults(data);
      handleFormAnimation(form, document.querySelector('.rating-complete'));
  }
  

  When I ran console.log(data), the result is {rating: VALUE}, where VALUE would be whatever radio option was selected in the form.

  The challenge didn't call for us to actually do anything with the data, but I commented out an example of what it could look like.

  Here's my solution for reference

  Marked as helpful

  0

  ---

  

  oo2smh•100

  @oo2smhPosted over 1 year ago

  @merrellj-codeup Thank you! You're right. I should have used the form element! I am not familiar with the FormData class and my Javascript is still unrefined. 😅 Still, I appreciate your feedback 🙏

  0

  

  P

  Jason Merrell•30

  @jason-merrellPosted over 1 year ago

  @oo2smh I looked at your JS, and you're doing great!

  1