I would like to talk more about finding the form using a selector.

Sure. It's not really different from our other operations of finding things, as we did with buttons and such:


<button id="myButton">click me</button>

<button data-role="trigger">or me!</button>

Then, in JS, we do:


$("#myButton").click(function (evt) { alert("thanks for clicking!"); });

$("[data-role=trigger]").click(function (evt) { alert("much better!"); });

Here, we have a form element:



<form data-coffee-order="form">

So the JS part is like this:


    $('[data-coffee-order="form"]').on('submit', function (evt) { ... });

    // or similarly:

    const FORM_SELECTOR = '[data-coffee-order="form"]';

    // generic code below
    const $form = $(FORM_SELECTOR);
    if($form.length==0) { alert("oops, could not find form!"); }
    $form.on('submit', function (evt) { ... });

The latter code is hidden inside our generic form handler.

I'm still a little confused about what the callback function actually does.

Good question. Let's expand the previous code:


    const FORM_SELECTOR = '[data-coffee-order="form"]';
    const callback = function (data) { myTruck.createOrder(data); };

    // generic code below
    const $form = $(FORM_SELECTOR);
    if($form.length==0) { alert("oops, could not find form!"); }
    $form.on('submit', function (evt) {
        evt.preventDefault();
        var data = {};
        // In an event handler, 'this' is the DOM element
        $(this).serializeArray().forEach(function (item) {
             data[item.name] = item.value;
             console.log(item.name + ' is ' + item.value);
        });
        console.log(data);
       callback(data);
       this.reset();
      this.elements[0].focus();    
      });

So the callback does the custom stuff for this form. In this case, it uses the Truck's createOrder method.

Could you explain callback functions in more detail? Can a callback be any function we define, and how does it relate to addSubmitHandler?

Yes, it can be anything we want. It's how we hook into that form submission, so that we can do some custom processing.

For forms that take files as a user input, are there any practices important for a front-end vs backend developers to know, use, or avoid to ensure the safety/privacy of the user's documents (in this case focusing specifically handling the files before they're stored on a server, as I imagine data storage broadly has a lot of other associated concerns)?

Wow, are you taking CS 304 instead? Great question, but outside the scope of CS 204. I'll say a few things here, but please follow up by email or in office hours if you'd like to learn more.

To upload files, we have to (1) use a different encoding type (enctype) of form, and (2) a different input (type=file) which creates a file selection widget in the browser. The user can then select the file to upload, so hopefully, they don't compromise their own security. Once the file is uploaded, the back end needs to make sure things are stored securely on the server.

No particular questions at this time.

Great!