2019-12-07 17:11:14 -07:00
---
id: 5ddb965c65d27e1512d44d9f
2020-08-25 02:19:45 -07:00
title: Part 6
2019-12-07 17:11:14 -07:00
challengeType: 0
2021-01-13 03:31:00 +01:00
dashedName: part-6
2019-12-07 17:11:14 -07:00
---
2020-11-27 19:02:05 +01:00
# --description--
2019-12-07 17:11:14 -07:00
When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side.
Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function.
2020-11-27 19:02:05 +01:00
# --hints--
2019-12-07 17:11:14 -07:00
2020-11-27 19:02:05 +01:00
See description above for instructions.
2019-12-07 17:11:14 -07:00
2020-11-27 19:02:05 +01:00
```js
assert(calculate.toString().match(/e\.preventDefault\(\s*\)/));
2019-12-07 17:11:14 -07:00
```
2020-11-27 19:02:05 +01:00
# --seed--
2019-12-07 17:11:14 -07:00
2020-11-27 19:02:05 +01:00
## --before-user-code--
2019-12-07 17:11:14 -07:00
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" / >
< title > < / title >
< meta name = "description" content = "" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< link rel = "stylesheet" href = "styles.css" / >
< / head >
< body >
< div class = "container" >
< form id = "calorie-form" >
< h2 class = "center" > Calorie Counter< / h2 >
< div class = "grid" >
< legend > Sex< / legend >
< div >
< input type = "radio" name = "sex" id = "female" value = "F" checked / >
< label for = "female" >
Female (2,000 calories)
< / label >
< div >
< input type = "radio" name = "sex" id = "male" value = "M" / >
< label for = "male" >
Male (2,500 calories)
< / label >
< / div >
< / div >
< / div >
< div class = "grid" id = "entries" >
Breakfast
< input
type="number"
min="0"
class="cal-control"
id="breakfast"
/>< br / >
Lunch
< input type = "number" min = "0" class = "cal-control" id = "lunch" / > < br / >
Dinner < input type = "number" min = "0" class = "cal-control" id = "dinner" / >
< / div >
< button type = "button" class = "btn-add" id = "add" >
Add Entry
< / button >
< button type = "submit" class = "btn-solid" id = "calculate" >
Calculate
< / button >
< button type = "button" class = "btn-outline" id = "clear" >
Clear
< / button >
< / form >
< div id = "output" > < / div >
< / div >
< / body >
< / html >
```
2020-11-27 19:02:05 +01:00
## --after-user-code--
2019-12-07 17:11:14 -07:00
```html
< / body >
< / html >
```
2020-11-27 19:02:05 +01:00
## --seed-contents--
2019-12-07 17:11:14 -07:00
2020-11-27 19:02:05 +01:00
```html
< script >
document.getElementById('calorie-form').onsubmit = calculate;
2019-12-07 17:11:14 -07:00
2020-11-27 19:02:05 +01:00
function calculate(e) {}
< / script >
```
2019-12-07 17:11:14 -07:00
2020-11-27 19:02:05 +01:00
# --solutions--
2019-12-07 17:11:14 -07:00
```html
< script >
document.getElementById('calorie-form').onsubmit = calculate;
function calculate(e) {
e.preventDefault();
}
< / script >
```
