1) Please download Class 17 Starter Code

2) Move the following into class-work:

citi-pix and form-test

3) Move the following into homework:


4) Solution to list-maker is included

Class #17


change / submit


• Final Projects:

⇒ Firth deliverable due Monday, November 19th

⇒ JavaScript Draft

• No Class:

⇒ Wednesday, 11/21



HTML <form> Element


Preventing Default Event Behaviours

Cash Register Lab/HW

List Maker Review


Review: Browser Events

• Actions users perform in the browser:

⇒ click

⇒ key down / key up

⇒ form submit

• JavaScript can listen and respond to events

More Events Info

.onclick / .click()

So far, we've used the click event:

	// jQuery

	// vanilla JavaScript
	document.querySelector('#someElement').onclick = myFunction

	function myFunction () {
	  // do something


• The .change() event will fire when the following change:




• Useful for rendering dynamic forms

Shopping Cart


• Apply .change() just as you would .click():


	function handleOnChange() {
	  // function body here

Codepen Example

Exercise: CitiPix

1. Open citi-pix in SublimeText

2. Follow the instructions in app.js

5 minute break

<form> Element

<form> Element

• Forms are used to capture user input

• User input is sent to/processed by the server

• HTML forms can contain any element...

• Typically contain some sort of input

<form> Element

• Example form structure:

		<input type="text" placeholder="Name">

			<option value="one">One</option>
			<option value="one">Two</option>

		<input type="checkbox"> Checkbox 1
		<input type="checkbox"> Checkbox 2

		<input type="submit" value="Submit Form">



• Fires when <form> elements are submitted


	function handleFormSubmit () {
	  // do something!

• On submit, sends form data to server (the backend)

• Only works on <form> elements

More info on form submission


• Specifically, .submit() will fire when:

⇒ User clicks <input type="submit>

⇒ User clicks <button type="submit></button>

⇒ User presses enter key while a <form> child is focused

• Note: There is an issue re: submitting forms...

• ...Open form-test in Sublime Text

Prevent Default Behavior

Preventing Default Event Behavior

• Some events/elements have default behaviors

• Ex: <a> tags change the browser's location

	<a href="http://google.com">Google</a>

• Most of the time, we can depend on the default

• Sometimes we want to override these behaviors

Preventing Default Event Behavior

• Override defaults using .preventDefault()


	function handleFormSubmit(event) {

	  // your code here!

• An event option is given to the handling function

• May see this referred to as evt, or just e

Preventing Default Event Behavior

• Event handlers can access the DOM's event obj

• Each event type generates a different event object

• We can optionally access the event via the handler:

	function handleClick(event) {

Lab/HW: Cash Register

1. Open up cash-register in Sublime Text

2. Follow instructions in app.js

On Deck: #18 - jQuery Plugins + Google Maps API

• jQuery Plugins

• Google Maps API Tutorial

Exit Tickets!