-
inputelements of typecheckboxare rendered by default as boxes that are checked (ticked) when activated value-
The
valueattribute is one which allinputelements share; however, it serves a special purpose for inputs of type checkbox - When a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute.
-
If the value is not otherwise specified, it is the
string
onby default.
-
The
-
checked- A boolean attribute indicating whether this checkbox is checked by default (when the page loads)
- It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)
- Unlike other input controls, a checkbox's value is only included in the submitted data if the checkbox is currently checked
- If it is, then the value of the checkbox's value attribute is reported as the input's value, or on if no value is set
DONT ADD ANYTHING HERE!
Example
HTML
<form id="form_one">
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="param1" value="coding" checked />
<label for="coding">Coding</label>
</div>
<div>
<input type="checkbox" id="music" name="param2" value="music" />
<label for="music">Music</label>
</div>
<div>
<input type="submit">
</div>
</fieldset>
</form>
<div>
<output id="out-choice1"></output>
<output id="out-choice2"></output>
</div>
javascript
// form
async function sendData() {
const formData = new FormData(form_one);
try {
const response = await fetch("https://php.tomgdow.com", {
method: "POST",
body: formData
});
let result = await response.text();
console.log(result);
let responseArray = result.split('&');
document.getElementById('out-choice1').value = responseArray[0];
document.getElementById('out-choice2').value = responseArray[1];
} catch (e) {
console.error(e);
}
}
document.getElementById('form_one').addEventListener('submit', function (event) {
event.preventDefault();
sendData();
});