mirror of
https://github.com/RGBCube/serenity
synced 2025-05-25 20:45:06 +00:00
71 lines
2.5 KiB
HTML
71 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>FormData</title>
|
|
<script>
|
|
function log(s) {
|
|
document.getElementById("out").innerHTML += `${s}\n`;
|
|
}
|
|
|
|
function dumpFormContents() {
|
|
let form = document.getElementById("form1");
|
|
form.onformdata = (e) => {
|
|
log("Event 'formdata' fired.");
|
|
log(`First name logged from the formdata event: ${e.formData.get("first_name")}\n`);
|
|
}
|
|
|
|
let formData = new FormData(form);
|
|
let firstName = formData.get("first_name");
|
|
let lastName = formData.get("last_name");
|
|
let file = formData.get("avatar");
|
|
let transportTypes = formData.getAll("transport_type");
|
|
log(`First name: ${firstName}`);
|
|
log(`Last name: ${lastName}`);
|
|
log(`file: ${file.type}`);
|
|
log("Transportation types:");
|
|
for (let i = 0; transportTypes.length > i; i++)
|
|
log(` - ${transportTypes[i]}`);
|
|
|
|
log("\n Iterate over keys: ")
|
|
for (let key of formData.keys()) {
|
|
log(`Key: ${key}`);
|
|
}
|
|
|
|
log("\n Iterate over values: ")
|
|
for (let value of formData.values()) {
|
|
log(`Value: ${value}`);
|
|
}
|
|
|
|
log("\n Iterate over entries: ")
|
|
for (let entry of formData.entries()) {
|
|
log(`Entry: ${entry[0]}, ${entry[1]}`);
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form id="form1">
|
|
<label for="first_name">First name:</label><br>
|
|
<input type="text" id="first_name" name="first_name" value="John"/><br>
|
|
<label for="last_name">Last name:</label><br>
|
|
<input type="text" id="last_name" name="last_name" value="Doe"/><br>
|
|
<label for="avatar">Avatar:</label><br>
|
|
<input type="file" id="avatar" name="avatar"/><br>
|
|
|
|
<p>How do you usually transport yourself?</p>
|
|
<input type="checkbox" id="transport_type1" name="transport_type" value="walking"/>
|
|
<label for="transport_type1">Walk</label><br>
|
|
<input type="checkbox" id="transport_type2" name="transport_type" value="public-transport"/>
|
|
<label for="transport_type2">Public transportation</label><br>
|
|
<input type="checkbox" id="transport_type3" name="transport_type" value="bicycle"/>
|
|
<label for="transport_type3">Bicycle</label><br>
|
|
<input type="checkbox" id="transport_type4" name="transport_type" value="motorcycle"/>
|
|
<label for="transport_type4">Motorcycle</label><br>
|
|
<input type="checkbox" id="transport_type5" name="transport_type" value="car"/>
|
|
<label for="transport_type5">Car</label><br>
|
|
</form>
|
|
|
|
<button onclick="dumpFormContents()">Test FormData Features</button>
|
|
|
|
<pre id="out"></pre>
|
|
</body>
|