HTML utilizado na aula
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trabalhando Com Formulários</title>
<script src="./index.js" defer></script>
</head>
<body>
<h1>Trabalhando Com Formulários</h1>
<hr>
<h2>Montar Pedido</h2>
<form id="orderForm">
<label for="name">Nome:</label>
<br>
<input type="text" name="name" id="name">
<br><br>
<label for="address">Endereço de Entrega:</label>
<br>
<input type="text" name="address" id="address">
<br><br>
<label for="breadType">Tipo de Pão</label>
<br>
<select name="breadType" id="breadType">
<option selected disabled>Selecione uma opção...</option>
<option value="3 queijos">3 queijos</option>
<option value="Parmesão e orégano">Parmesão e orégano</option>
<option value="9 grãos">9 grãos</option>
<option value="Italiano branco">Italiano branco</option>
<option value="Granola salgada">Granola salgada</option>
<option value="Manteiga temperada">Manteiga temperada</option>
</select>
<br><br>
<label for="main">Principal:</label>
<br>
<input type="radio" name="main" id="main1" value="Carne">
<label for="main1">Carne</label>
<input type="radio" name="main" id="main2" value="Frango">
<label for="main2">Frango</label>
<input type="radio" name="main" id="main3" value="Vegano">
<label for="main3">Vegano</label>
<br><br>
<label for="salad">Salada:</label>
<br>
<input type="checkbox" name="salad" id="salad1" value="Alface">
<label for="salad1">Alface</label>
<input type="checkbox" name="salad" id="salad2" value="Tomate">
<label for="salad2">Tomate</label>
<input type="checkbox" name="salad" id="salad3" value="Azeitonas">
<label for="salad3">Azeitonas</label>
<input type="checkbox" name="salad" id="salad4" value="Cenoura">
<label for="salad4">Cenoura</label>
<input type="checkbox" name="salad" id="salad5" value="Picles">
<label for="salad5">Picles</label>
<br><br>
<label for="observations">Observações:</label>
<br>
<textarea name="observations" id="observations" cols="30" rows="6"></textarea>
<br><br>
<button type="submit">Fechar Pedido</button>
</form>
</body>
</html>
Javascript utilizado na aula
const form = document.getElementById("orderForm")
form.addEventListener("submit", function (ev) {
ev.preventDefault()
const name = document.querySelector("input[name='name']").value
const address = document.querySelector("input[name='address']").value
const breadType = document.querySelector("select[name='breadType']").value
const main = document.querySelector("input[name='main']").value
const observations = document.querySelector("textarea[name='observations']").value
let salad = ""
document.querySelectorAll("input[name='salad']:checked").forEach(function (item) {
salad += " - " + item.value + "\\n"
})
console.log({
name,
address,
breadType,
main,
salad,
observations
})
alert(
"Pedido Realizado!" +
"\\nNome do cliente: " + name +
"\\nEndereço de entrega: " + address +
"\\nTipo de pão: " + breadType +
"\\nRecheio: \\n - " + main + "\\n" + salad +
"Observações: " + observations
)
})