checkbox-fix-post
v1.0.0
Published
Fixes form checkboxes so that when you POST it actually posts a value
Downloads
6
Readme
Checkbox Fix Post
This library fixes checkboxes so that they submit a value on a form submit, even if they are not selected, by adding an "inverse-value" attribute to your checkbox.
It uses vanilla Javascript and does not rely on external libraries.
Usage
<script src="./checkbox-fix-post.bundle.js"></script>
<script>
checkboxfixpost();
</script>
<form action="" method="get">
<label for="checkbox1">
<input type="checkbox" name="checkbox1" value="1" inverse-value="0">
Checkbox 1
</label>
<br>
<label for="checkbox1">
<input type="checkbox" name="checkbox2" value="1" inverse-value="0">
Checkbox 2
</label>
<br>
<input type="submit" value="Submit">
</form>
<hr>
<form action="" method="get">
<label for="checkbox3">
<input type="checkbox" name="checkbox-inverse" value="Blah" inverse-value="Yack">
Checkbox with Inverse
</label>
<br>
<input type="submit" value="Submit">
</form>
Options
You can pass the following options when calling checkboxfixpost()
:
selector
A selector for a form or forms you want to target. Defaults to form
. Eg. #myForm
.
checkbox_selector
A selector for the checkboxes you wish to target. Defaults to all checkboxes with input[type="checkbox"]
.
Specifying values
Set inverse-value
as an attribute on the checkbox input. If the checkbox is checked, the value will be the value of the checkbox. If the checkbox is not checked, the value will be the value of inverse-value
.
<input type="checkbox" name="checkbox-inverse" value="Blah" inverse-value="Yack">
NOTE - Breaking Change
Pre-version 1.0.0, a value of 0 will always be returned if the checkbox is selected, unless you set the property inverse-value
on the checkbox, in which case that value will be sent. Post v1.0.0, unless inverse-value
is set, the checkbox will act as a normal checkbox. If you want to send a value of 0, you must set inverse-value
to 0.
Using as a library
You can use this as a library by simply requiring it.
npm i --save checkbox-fix-post
const CheckboxFixPost = require("checkbox-fix-post");
const checkbox_fix_post = new CheckboxFixPost({
selector: `form`, // Default
checkbox_selector: `input[type="checkbox"]` // Default
});