Quiz

1. Not exactly related to the reading, but I noticed that the grading weights for quizzes and tests are different on the Sakai grade book versus on the course website. On the website, quizzes are weighted at 5%, the prereq exam is weighted at 5%, etc., but on Sakai, all tests and quizzes are weighted at 5%. Which grading set-up should we go with? Thanks!

   Thanks for checking. Let's look at those and compare.

2. Are pulldown and dropdown menus the same?

   I use those words pretty interchangeably. Do you see a difference? There is select versus dropdown

3. It was mentioned in the reading that "Forms collect data from the user as a set of name/value pairs", but I don't think I completely understand what kind of data structure this means. Is it like a dictionary with the key-value pairs? Where is the collected data stored?

   This is a great question, because the representation varies. There's the raw JS api, which is an HTMLFormControlsCollection. I've never used it, because I prefer jQuery's API.

   jQuery can give the form data to us either as a string (useful sometimes, but mostly yucky).

   jQuery can also give us the form data as an array of objects: key/value pairs. This is very useful, though still not great. The reading probably should have covered this but didn't. I'll add something.

   There's also the FormData object, which we may talk about later in the course

4. serializing forms / how does form serialization work?

   Interesting! Many questions on serialization, but the reading and quiz didn't really cover this.

   The reading should probably have talked about jQuery's serializeArray method. I'll demo it with the pizza form.

5. What's the advantage of using on() over submit() handler?

   Very little, until we learn about the delegated handler technique, which jQuery has special support for using the .on method. For one-off handlers, there's no important difference.

6. Could we go over some examples of attaching functions and creating forms

   Sure. I'll attach a trivial one to the pizza form. Later, I'll ask you to write a form.

7. Could we go over more about how to handle form input in the backend if it's submitted multiple times?

   Excellent. The first idea is to try to prevent multiple submissions. By using the normal form submission mechanism and bringing someone to a new page (maybe that says "thank you" or "your order has been submitted"), we can try to prevent it.

   Second, the POST method for a form asks the browser to try to avoid re-submission, say by refreshing a page.

   Third, on the back-end, we can compare the order with a previous order from this browse (using a cookie to identify the browser), and if it's similar or identical, we might ask for a confirmation. But that's really going above and beyond. Maybe someone wants two items?

8. I still don't feel super comfortable with attributes and when we would use square brackets around an attribute=value expression.

   Yeah, it's a little weird. But it's useful when we are using the name attribute, which is common with forms. For example: $("[name=email]").val() to extract the user's email address.

   We also saw it with the data- attributes in Ottergram.

9. More about what we can do with submission events!

   We can check the form for validity. There are ways to do that in the front-end using HTML that are typically easier for simple cases (missing entries, length, etc), but for arbitrary computations, we need JS.

   Later in the course, we may learn about using Ajax, where the form submission is prevented and the data is submitted directly from JS. That allows us to stay on the same page and avoid a possibly costly and certainly annoying page refresh.

10. More in class exercises and active typing would be better for my learning! Lectures aren't always that helpful unless I am actively typing.

    Excellent point. Let's make sure we have time to work on an exercise.

11. Nothing at the moment / All seems clear!

    Great!