HELLO

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:

cash-register

4) Solution to list-maker is included

Class #17

11/14/2018

change / submit

Announcements

• Final Projects:

⇒ Firth deliverable due Monday, November 19th

⇒ JavaScript Draft

• No Class:

⇒ Wednesday, 11/21

Agenda

• .change()

• HTML <form> Element

• .submit()

• Preventing Default Event Behaviours

• Cash Register Lab/HW

List Maker Review

.change()

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
	$('#someElement').click(myFunction)

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

	function myFunction () {
	  // do something
	}
.change()

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

⇒ <input>

⇒ <select>

⇒ <textarea>

• Useful for rendering dynamic forms

⇒ Shopping Cart

.change()

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


	$('#some-input').change(handleOnChange)

	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:


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

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

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

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

.submit()

.submit()

• Fires when <form> elements are submitted


	$('#my-form').submit(handleFormSubmit)

	function handleFormSubmit () {
	  // do something!
	}

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

• Only works on <form> elements

• More info on form submission

.submit()

• 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()


	$('#my-form').submit(handleFormSubmit)

	function handleFormSubmit(event) {
	  event.preventDefault()

	  // 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) {
	  console.log(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!