FormData API

Given this HTML form:

<form id="contact-form">
  <input name="email" type="email" required />
  <input name="phone" type="tel" />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

• What does new FormData(form) return? It creates a new 'FormData' object. This is made up of all of the 'name' fields from our form inputs and pairs them with the 'values.' Note: All of the 'names' should not contain spaces. For instance, name="Student Name" is NOT GOOD. name="studentName" is just fine.

• How do you convert FormData into a plain JavaScript object?

const submission = Object.fromEntries(new FormData(form))

• Which inputs get included in FormData? (All of them, or just some?)

We just need to make sure to include a name attribute in the HTML input.

(Reference: Form Fundamentals)

Form Submit Event

Fill in the blanks to properly handle form submission:

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();  // Stop the browser's default behavior
  
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  
  console.log(data);
});

• What happens if you DON'T call event.preventDefault()? It basically just reloads the page as the browser tries to submit the form.

• We can use form.email to access the input field with the name of email. However, if the input that we are looking is in a variable we would need to use bracket notation.

const inputFieldThatIWant = "email"

form[inputFieldThatIWant]

So, we need the bracket notation to acess a field dynamically by its variable name.

(Reference: Form Fundamentals)

Form Attributes and Validation

Match each HTML attribute to its purpose:

• name="email"
• type="email"
• required
• placeholder="Enter your email"

Questions:

• Which attribute is REQUIRED for FormData to include the input? name="email"

• Which attribute provides built-in browser validation? type="email" and required

• What happens if you submit a form with a required field that's empty?

You get built-in browser validation messaging on that field.

• What's the difference between type="text" and type="email"?

The browser will look for an "@" if it's an email type.

(Reference: Form Fundamentals)

Tailwind lassListManipulation

Given this button:

<button id="theme-btn" class="bg-blue-500 text-white px-4 py-2">
  Toggle Theme
</button>

• Write code to remove bg-blue-500 and add bg-gray-800

classList.replace('bg-blue-500', 'bg-gray-800')

• How do you toggle the hidden class on/off?

classList.toggle('hidden')

• What's the difference between classList.add() and setting .className?

add will...add the additional classes to the element, whereas setting .className will eradicate whatever was previously there.

• Why is classList better for Tailwind than manipulating .style directly?

(Reference: DOM Fundamentals)

Event Handling and Array Methods

const REQUIRED = ["name", "email", "message"];
const form = document.querySelector('form');
const submitBtn = form.querySelector('button[type="submit"]');

submitBtn.disabled = true;

form.addEventListener('input', () => {
  submitBtn.disabled = !REQUIRED.every(field => 
    form[field].value.trim() !== ""
  );
});

• What does the every() method return?

It uses a predicate callback function (a callback function that returns true or false) and it will return true if ALL items in the array pass the predicate (the test). For example, we might have scores.every(score => score >= 90) This would return true if ALL scores are greater than or equal 90.

• What event triggers this check? (What is 'input'?)

Any events on any input within the form. focus, blur, click, etc.

• Why use .trim() when checking if a field has a value?

Trim out any white space before and after the field's value.

(Reference: Form Fundamentals)