Skip to content

Commit 1560cf6

Browse files
elfgoddelfgodd
committed
Section 15: Form Events & PreventDefault
1 parent 7ba6e46 commit 1560cf6

4 files changed

Lines changed: 87 additions & 0 deletions

File tree

‎15-Communicating-with-Events/09/app.css‎

Whitespace-only changes.

‎15-Communicating-with-Events/09/app.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// ******************************
2+
// Form Events & PreventDefault ******************************
3+
// Example 1
4+
5+
// This will make the browser refresh
6+
// const form = document.querySelector('#signup-form')
7+
// form.addEventListener('submit', function() {
8+
// console.log('submit form')
9+
// })
10+
11+
// Example 2
12+
13+
const creditCardInput = document.querySelector('#cc')
14+
const termsCheckbox = document.querySelector('#terms')
15+
const veggieSelect = document.querySelector('#veggie')
16+
17+
const form = document.querySelector('#signup-form')
18+
form.addEventListener('submit', function (e) {
19+
e.preventDefault()
20+
// console.log('submit form')
21+
22+
console.log('cc: ', creditCardInput.value)
23+
console.log('terms: ', termsCheckbox.checked)
24+
console.log('veggieSelect: ', veggieSelect.value);
25+
26+
// send form data to a database
27+
// append something to page using form data
28+
})
29+

‎15-Communicating-with-Events/09/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="app.css" />
8+
<title>JavaScript</title>
9+
</head>
10+
<body>
11+
<h1>Form Events & PreventDefault</h1>
12+
<hr />
13+
<form id="signup-form" action="'no" method="GET">
14+
<input type="text" placeholder="Credit card" id="cc"/>
15+
<label>
16+
I agree to sell my soul to your company
17+
<input type="checkbox" placeholder="Credit card" id="terms"/>
18+
</label>
19+
<select name="" id="veggie">
20+
<option value="eggplant">Eggplant</option>
21+
<option value="asparagus">Asparagus</option>
22+
<option value="carrot">Carrot</option>
23+
</select>
24+
<input type="submit">
25+
</form>
26+
<script src="app.js"></script>
27+
</body>
28+
</html>

‎15-Communicating-with-Events/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,33 @@ We need to add in a parameter `changeColor(event)`, usually you'll see **e** or
109109
- **keypress** for something to be considered a keypress, there needs to be a character showing up in this input or a change like space
110110

111111
## 8. Coin Game Demo
112+
113+
## 9. Form Events & PreventDefault
114+
115+
A form is made to take data that we get from an input and submit it or send it somewhere.
116+
117+
Traditionally, we would submit our data to some URL like /signup => this would be an endpoint on our own server. The data would be sent to /signup and then on our server side we would do something, create a new user in the database and then respond with a new page that would load and so you would end up going to a completely new page
118+
119+
So what we'll do with JavaScript is take the form when it's submitted, will say stop, don't actually send the request, don't take us anywhere else, i just want to capture that event, i want to trigger some JavaScript code, when the user submits the form, then we can extract the information we want and do something with it.
120+
121+
Whether it's simply to display it back to the user, whatever we're doing here or maybe we'll send the data to a database somewhere to a server, but we won't actually refresh the page.
122+
123+
We'll do it using JavaScript on the same page we're currently on and we could maintain a single page application.
124+
125+
```javascript
126+
const form = document.querySelector('#signup-form')
127+
form.addEventListener('submit', function(e) {
128+
console.log('submit form')
129+
e.preventDefault()
130+
})
131+
132+
<form id="signup-form" action="'no" method="GET"></form>
133+
```
134+
135+
**e.preventDefault()** prevent the default behavior and the default behavior in this case with a form when it's submitted, is to continue sending on your data, sending a request to whatever URL we specified in our case /no with a GET request
136+
137+
Our form has not actually submitted, the submit event has run but we haven't actually submitted data anywhere and this leaves us free to now extract data adn send it to an API using AJAX, using client side request
138+
139+
The point is we have the flexibility to do something with the data and we can still capture the submit event
140+
141+
By adding just one submit event listener, there's just one event we're waiting for to extract our data.

0 commit comments

Comments
 (0)