A Special Sub-interface of Element: InputElement
Input elements are user input fields, and the tag is self-closing, which means there is no HTML or text inside.
So how do we retrieve their value?
Retrieving the Value of a User Input (input)
With the basics acquired in HTML, CSS, JavaScript, and DOM, we can understand the following code:
html
<html>
<head>
<style>
input {
border: 1px solid gray;
border-radius: 3px;
padding: 0.8em;
}
</style>
</head>
<body>
<form id="login-form">
<label for="login">
Username :
</label>
<input name="login" id="login" placeholder="Type here">
<label for="password">
Password :
</label>
<input type="password" name="password" id="password" placeholder="And here too">
<input type="submit" value="Then click here">
</form>
<div>
Values : <span id="result"></span>
</div>
<script>
const formElt = document.querySelector('#login-form') // Retrieving the form element by its id
const loginElt = document.querySelector('#login') // Retrieving the login input by its id
const passwordElt = document.querySelector('#password') // Retrieving the password input by its id
const resultElt = document.querySelector('#result') // Retrieving the element where we will display data by its id
formElt.addEventListener('submit', getValues) // Adding a listener to the form's 'submit' event, see below
function getValues (event) { // Creating the function that will be called each time the form is submitted (validated)
event.preventDefault() // Canceling the default action of the event (which would be sending the form content to a page)
const login = loginElt.value // Retrieving the value of the 'login' field
const password = passwordElt.value // Retrieving the value of the 'password' field
// Displaying the field values (for demonstration purposes only, do not do this!)
resultElt.innerHTML = 'Username: <strong>' + login + '</strong> - Password: <strong>' + password + '</strong>'
}
</script>
</body>
</html>The value property of an input is modifiable:
js
loginElt.value = 'new value'Thus, if we programmatically change its value, it will be visible on the page, in the browser.
The Special Case of checkbox and radio Types
input elements of type checkbox and radio will always have the same value, so we need to retrieve not only the value but also the checked property, meaning see if they are checked.
html
<html>
<head>
<style>
input {
border: 1px solid gray;
border-radius: 3px;
padding: 0.8em;
}
fieldset {
margin: 1em;
border: 1px solid gray;
border-radius: 3px;
padding: 0.8em;
}
</style>
</head>
<body>
<form id="menu-form">
Select :
<fieldset>
<legend>Main course</legend>
<div>
<input type="checkbox" name="burger" id="burger" value="Un burger">
<label for="burger">
Burger
</label>
<input value="bœuf" type="radio" name="burger-protein" id="beef" checked>
<label for="beef">
Beef
</label>
<input value="portobello" type="radio" name="burger-protein" id="portobello">
<label for="portobello">
Portobello
</label>
</div>
<div>
<input type="checkbox" name="side" id="side" value="side">
<label for="side">
Aside
</label>
<input type="radio" name="side-choice" id="salad" value="une salade" checked>
<label for="salad">
Sala
</label>
<input type="radio" name="side-choice" id="fries" value="des frites">
<label for="fries">
Fries
</label>
</div>
</fieldset>
<fieldset>
<input type="checkbox" name="dessert" id="dessert" value="dessert">
<label for="dessert">
Dessert
</label>
<input type="radio" name="dessert-choice" id="cheesecake" value="un cheesecake" checked>
<label for="cheesecake">
Cheesecake
</label>
<input type="radio" name="dessert-choice" id="brownie" value="un brownie">
<label for="brownie">
Brownie
</label>
</fieldset>
<input type="submit" value="Puis cliquez ici">
</form>
<div>
Menu : <span id="menu"></span>
</div>
<script>
const formElt = document.querySelector('#menu-form')
const burgerElt = document.querySelector('#burger')
const burgerProteinElts = Array.from(document.querySelectorAll('[name="burger-protein"]'))
const sideElt = document.querySelector('#side')
const sideChoiceElts = Array.from(document.querySelectorAll('[name="side-choice"]'))
const dessertElt = document.querySelector('#dessert')
const dessertChoiceElts = Array.from(document.querySelectorAll('[name="dessert-choice"]'))
const menuElt = document.querySelector('#menu')
formElt.addEventListener('submit', getValues)
function getValues (event) {
event.preventDefault()
// Declaration of all variables
let burger = ''
let side = ''
let sideStart = ''
let dessert = ''
let dessertStart = ''
let choice = ''
if (burgerElt.checked) {
burger = 'Burger au ' + burgerProteinElts.filter(elt => elt.checked).map(elt => elt.value)
}
console.log(burger)
if (sideElt.checked) {
sideStart = burgerElt.checked ? 'with ' : 'Only '
side = sideStart + sideChoiceElts.filter(elt => elt.checked).map(elt => elt.value)
}
console.log(side)
if (dessertElt.checked) {
dessertStart = (burgerElt.checked || sideElt.checked) ? ' followed by' : 'Only '
dessert = dessertStart + dessertChoiceElts.filter(elt => elt.checked).map(elt => elt.value)
}
console.log(dessert)
// Display the values of the fields (only for démonstration, DO NOT DO THIS!)
menuElt.innerHTML = burger + ' ' + side + ' ' + dessert
console.log(burger + ' ' + side + ' ' + dessert)
}
</script>
</body>
</html>