Keep checkbox checked or unchecked on page reload, using vanillla JS - javascript

I can't wrap my head around this. I have this checkbox:
<input id="copy" name="varcopy" onkeyup="saveValue(this)" tabindex="4"
form="contact_form_id" type="checkbox" value="sendacopy" checked="checked" />
I need to store if the checkbox is checked or unchecked on page reload (whether the checkbox is actived/deactivated by spacebar or on mouseclick). I want to use localStorage for this, in plain JavaScript, no jQuery.
I have these functions to save and restore values of input fields (it works for all text inputs, but not for the checkbox):
function saveValue(e) {
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue(v) {
if (localStorage.getItem(v) === null) {
return "";
}
return localStorage.getItem(v);
}
I did much research on the net, but I can't find what I specifically need. Please be gentle on me, I'm a beginner. This is what I tried to do with these 2 functions, but it doesn't work at all:
function saveValue(e) {
var id = e.id;
var val = e.value;
if (id == "copy") {
val = e.checked;
}
localStorage.setItem(id, val);
}
function getSavedValue(v) {
if (localStorage.getItem(v) === null) {
return "";
}
if (v == "copy") {
if (localStorage.getItem(v) == true)
return "true";
if (localStorage.getItem(v) == false)
return "false";
}
return localStorage.getItem(v);
}
This is how I invoke the getSavedValue() function:
document.getElementById("copy").value = getSavedValue("copy");
Ok, I'm making progress, this is my checkbox:
<input id="copy" name="varcopy" onkeyup="saveChecked(this)"
onmouseup="saveChecked(this)" tabindex="4"
form="contact_form_id" type="checkbox" />
These are my functions:
function saveChecked(e) {
var id = e.id;
var val = e.checked?1:0;
localStorage.setItem(id, val);
}
function getSavedValue(v) {
if (localStorage.getItem(v) === null) {
return "";
}
return localStorage.getItem(v);
}
And this is the invocation:
document.getElementById("copy").checked = !!getSavedValue("copy");
The problem is it always defaults to true, or always defaults to false. It doesn't switch.


This can be achieved as simple as follows:
var isChecked = !!getSavedValue('someKey');
var checkbox = document.getElementById('copy');
checkbox.checked = isChecked;
!!getSavedValue('someKey'); converts the value returned by your function into a boolean. An empty string, undefined and null will be converted to false and anything else will be converted to true.


Here is modified saveValue function, you can use it.
function saveValue(e) {
var id = e.id;
var val = e.value;
if(e.type === 'checkbox') {
val = e.checked?1:0;
}
localStorage.setItem(id, val);
}


It seems the checked attribute on a checkbox returns either true or false. (Somehow also it is true when unchecked, and false when checked) Problem is that if I do this:
val = e.checked?1:0;
it will always return 1. I think the checked attribute returns a string, not a boolean, so when I do the above in JavaScript, it will always be a non-empty string, meaning it will return true. I had to do this instead:
var val = "";
if (e.checked != true) { //Not-equals because true is unchecked, false is checked
val = "1";
}
Now it works, the checkbox remembers its state on page reload.


The following example will do that for you...
Enjoy... :-)
<script>
function saveData(e) {
let id = e.id;
let val;
if (e.type === 'checkbox'){
val = e.checked;
}else{
val = e.value;
}
localStorage.setItem(id, val);
}
function loadFieldData(id){
let elm = document.getElementById(id);
let value = localStorage.getItem(id);
if (elm) {
if (elm.type === 'checkbox') {
elm.checked = Boolean(value);
}else{
elm.value = value;
}
}
}
function loadData() {
loadFieldData('text1');
loadFieldData('copy');
}
</script>
<body>
<input id="text1" onkeyup="saveData(this)" onchange="saveData(this)" type="text" />
<br/>
<input id="copy" onchange="saveData(this)" type="checkbox" />
<br/>
<br/>
<input type="button" onclick="loadData()" value="Load Data" />
</body>

Related

I have a problem with form validation in JS DOM

When i click a field and pass another, span tag is getting red color. Then i press the submit button it is showing alert message. But when i turn to red span and fill in the field and press submit button it is showing success even if other fields are blank.
const regForm = document.getElementById('regForm');
var validObjects = document.querySelectorAll('[customValidate]');
validObjects.forEach(function(element) {
element.addEventListener('blur', function() {
var emoji = element.previousElementSibling;
var label = emoji.previousElementSibling;
if (!element.value) {
emoji.className = "far fa-frown float-right text-danger";
var span = document.createElement("span");
span.innerHTML = " * Required";
span.style.color = "red";
if (!label.getElementsByTagName("span")[0])
label.appendChild(span);
isValid = false;
} else {
emoji.className = "far fa-smile float-right text-success";
var span = label.getElementsByTagName("span")[0];
if (span)
label.removeChild(span);
isValid = true;
}
});
});
regForm.addEventListener('submit', function(event) {
event.preventDefault();
var isValid = true;
validObjects.forEach(function(element) {
isValid = element.value ? true : false;
})
if (!isValid) {
alert("empty!");
} else {
alert("success!");
}
});
JSFiddle :https://jsfiddle.net/roop06/cjmdabrf/

because isValid is only going to be equal to the last item in the forEach
validObjects.forEach(function(element) {
isValid = element.value ? true : false; // replaces false with true on last iteration
})
If you want to use a forEach you would want to code it like this so it does not overwrite isValid. It uses its previous state.
var isValid = true;
validObjects.forEach(function(element) {
isValid = element.value ? isValid : false;
})
But if you are not doing anything else in the forEach loop, there is a better option. That option is to use every which will exit when it gets to false.
var isValid = validObjects.every(function (element) {
return element.value.length
})
var form = document.querySelector('form');
var validObjects = Array.from(document.querySelectorAll('[customValidate]'));
form.addEventListener("submit", function (e) {
var isValid = validObjects.every(function (element) {
return element.value.length
})
return isValid
})
<form>
<input customValidate>
<input customValidate>
<input customValidate>
<button>submit</button>
</form>
Or you can just use the built in HTML5 validation using required and let the browser do it for you.
<form>
<input customValidate required>
<input customValidate required>
<input customValidate required>
<button>submit</button>
</form>

Try this
JSFiddle
validObjects.forEach(function(element) {
if(!(element.value)){
isValid = false;
}
})

The problem you have is that if the last field is valid then the isValid flag will always be true. One way to get around this is to stop setting the flag once you have determined that there is an invalid field:
validObjects.forEach(function (element) {
if (isValid) {
isValid = element.value ? true : false;
}
});

JavaScript button that changes the value in the checkbox field

I am trying to create a button that when clicked replaces the value in the field true false. If we click the first time the field becomes true, if the second time the field becomes false. But I still can't get the results. The field only changes true.
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<script>
function check() {
var value = document.getElementById("myCheck");
if (value = "false") {
document.getElementById("myCheck").checked = true;
} else {
document.getElementById("myCheck").checked = false;
}
}
</script>

Avoid inline handlers ("onclick"). You can simplify this using:
const checkUncheck = () => {
const cb = document.querySelector("#myCheck");
cb.checked = !cb.checked;
};
document.querySelector("button").addEventListener("click", checkUncheck);
<input type="checkbox" id="myCheck" disabled>
<button>check/uncheck</button>

You need to check if the checked attribute of your checkbox is true or false.
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<script>
function check() {
var checkbox = document.getElementById("myCheck");
if (checkbox.checked !== true) {
checkbox.checked = true;
} else {
checkbox.checked = false;
}
}
</script>
Also, you can re-use the checkbox variable.

Temporarily disable an input field if second input field is filled

I'm attempting to disable an input while the user is filling another input. I've managed to disable one of the two inputs while the other input is being filled in.
The problem is that I want the disabled input to ONLY be disabled WHILE the other input is being typed in.
So if the user changes their mind on the 1st input, they can delete what is in the current input which makes the 2nd input available and the 1st disabled.
JS
var inp1 = document.getElementById("input1");
inp1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("input2").disabled = true;
}
}
HTML
<input type="text" id="input1">
<input type="text" id="input2">

First, I would use input rather than change. Then, you need to set disabled back to false if the input is blank. Your check for whether it's blank is redundant, you just neither either side of your ||, not both. (I'd also use addEventListener rather than assigning to an .onxyz property, so that it plays nicely with others. :-) )
So:
var inp1 = document.getElementById("input1");
inp1.addEventListener("input", function () {
document.getElementById("input2").disabled = this.value != "";
});
<input type="text" id="input1">
<input type="text" id="input2">
...and then of course if you want it to be mutual, the same for input2.

You can achieve this using focus and blur. Below it is done with JQuery.
$(function() {
$('#input1').focus(function(){
$('#input2').prop('disabled', 'disabled');
}).blur(function(){
$('#input2').prop('disabled', '');
});
$('#input2').focus(function(){
$('#input1').prop('disabled', 'disabled');
}).blur(function(){
$('#input1').prop('disabled', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">

How about using keyup?
Like this;
var inp1 = document.getElementById("input1");
var inp2 = document.getElementById("input2");
inp1.onkeyup = function() { inputValidation(this, inp2); }
inp2.onkeyup = function() { inputValidation(this, inp1); }
function inputValidation(origin, lock) {
var response = hasValue(origin.value);
lock.disabled = response;
}
function hasValue(value) {
return value != "" && value.length > 0;
}
https://jsfiddle.net/8o3wwp6s/

Don't make it harder than it is, this is simple.
var one = document.getElementById('one');
var two = document.getElementById('two');
//checks instantly
var checker = setInterval(function() {
if(two.value !== '') {
one.disabled = true;
} else {
//when its clear, it enabled again
one.disabled = false;
}
if(one.value !== '') {
two.disabled = true
} else {
two.disabled = false;
}
}, 30);
<input id="one">
<input id="two">

How can I apply CSS to a link if at least one input is not original, and undo that change if all inputs are original?

I have a bunch of checkboxes, radio buttons, and text fields on my page. They all have '_boom' appended to the end of the id. I want to detect if any one of these inputs is not its original value, and if so, apply CSS to a button called 'save' on the page. Then, if the user reverts any changes they made and all inputs have their original values, I want to undo the CSS.
I've gotten close with the code below. But let's say I check 3 checkboxes. Upon checking the 1st box, the CSS changes. Good! I check the 2nd and 3rd boxes. The CSS stays the same. Good! But then I uncheck ONE of the boxes, and the CSS reverts. Bad! The CSS should only revert if I undo every change.
$('[id*="_boom"]').change(function() {
var sType = $(this).prop('type'); //get the type of attribute we're dealing with
if( sType === "checkbox" || sType === "radio" ){ //checkbox or radio type
var originalCheckedState = $(this).prop("defaultChecked");
var currentCheckedState = $(this).prop("checked");
if(currentCheckedState !== originalCheckedState){
$("a#save").css("color","#CCCCCC");
}
else {
$("a#save").css("color","black");
}
}
if( sType === "text" ){ //text type
var originalValue = $(this).prop("defaultValue");
var currentValue = $(this).val();
if(currentValue !== originalValue){
$("a#save").css("color","#CCCCCC");
}
else {
$("a#save").css("color","black");
}
}
});
#save {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="check_boom" />
<input type="checkbox" id="check1_boom" />
<input type="checkbox" id="check2_boom" />
<input type="radio" id="radio_boom" />
<input type="text" defaultValue="test" id="text_boom" />
<input type="text" defaultValue="test" id="text2_boom" />
Save

There are many possible improvements in your code to make it cleaner and standardized. Things like instead of relying on id you should consider class attribute and all... but I will not revamp your code. Here's the solution to your existing code.
The idea is loop through all the form elements and if atleast one of the elements is different than its default value then set the flag and come out of the loop.
At the end, check for that flag and set the css accordingly.
For this, I have enclosed your elements into a form form1.
$("#form1 :input").change(function() {
var changed = false;
formElems = $("#form1 :input");
for(i=0;i<formElems.length; i++){
var sType = $(formElems[i]).prop("type");
if(sType === "checkbox" || sType === "radio"){
if($(formElems[i]).prop("defaultChecked") !== $(formElems[i]).prop("checked")){
changed = true;
break;
}
}else if(sType === "text"){
if($(formElems[i]).prop("defaultValue") !== $(formElems[i]).val()){
changed = true;
break;
}
}
}
if(changed){
$("a#save").css("color","#CCCCCC");
}else{
$("a#save").css("color","black");
}
});
And here is your form
<form id="form1">
<input type="checkbox" id="check_boom" />
<input type="checkbox" id="check1_boom" />
<input type="checkbox" id="check2_boom" />
<input type="radio" id="radio_boom" />
<input type="text" defaultValue="test" id="text_boom" />
<input type="text" defaultValue="test" id="text2_boom" />
Save
</form>

The problem is, when one of them change to its original value, it doesn't mean there is no change.
So, in your else code block, you should check all the inputs, if all of them are the original values, remove the 'save' class from the button, otherwise, keep it.
var isChanged = function ($element) {
var sType = $element.prop('type');
if (sType === "checkbox" || sType === "radio") {
var originalCheckedState = $element.prop("defaultChecked");
var currentCheckedState = $element.prop("checked");
if (currentCheckedState !== originalCheckedState) {
return true;
} else {
return false;
}
} else if( sType === "text" ) {
var originalValue = $element.prop("defaultValue");
var currentValue = $element.val();
if (currentValue !== originalValue) {
return true;
} else {
return false;
}
}
};
var $inputs = $('[id*="_boom"]');
var isAnyChanged = function () {
$inputs.each(function () {
if (isChanged($(this))) {
return true;
}
});
return false;
};
$inputs.change(function () {
if (isChanged($(this))) {
$("a#save").css("color","#CCCCCC");
} else if (!isAnyChanged()) {
$("a#save").css("color","black");
}
});

How can I serializeArray for unchecked checkboxes?

How can I modify this example so it can get values from checkboxes that aren't checked?
I want all checkboxes to have a value, if it hasn't been checked I want to get its value as false.
<input type="checkbox" name="Check01" value="true" />
<input type="checkbox" name="Check02" value="true" checked="checked" />
Default behavior
$("form").serializeArray();
// [Check02 = true]
Expected behavior
$("form").serializeArray();
// [Check01 = false, Check02 = true]

It's probably easiest to just do it yourself:
var serialized = $('input:checkbox').map(function() {
return { name: this.name, value: this.checked ? this.value : "false" };
});
If there are other inputs, then you could serialize the form, and then find the unchecked checkboxes with something like the above and append that result to the first array.

serializeArray ignores the checkboxes which are not checked. You can try something like this.
Working demo
var serializedObj = {};
$("form input:checkbox").each(function(){
serializedObj[this.name] = this.checked;
});

you can use this get unchecked values
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
var $radio = $('input[type=radio],input[type=checkbox]',this);
$.each($radio,function(){
if(!o.hasOwnProperty(this.name)){
o[this.name] = '';
}
});
return o;
};
code samples

another option is to just look at the source code for serializeArray and remove (or modify) the call to filter. I Just took that function and created a new one called serializeArrayAll like this:
$.fn.serializeArrayAll = function() {
var rCRLF = /\r?\n/g;
return this.map(function(){
return this.elements ? jQuery.makeArray( this.elements ) : this;
})
/* this is what is excluding the unchecked checkboxes (and also other disabled options)
.filter(function(){
return this.name && !this.disabled &&
( this.checked || rselectTextarea.test( this.nodeName ) ||
rinput.test( this.type ) );
})
*/
.map(function( i, elem ){
var val = jQuery( this ).val();
return val == null ?
null :
jQuery.isArray( val ) ?
jQuery.map( val, function( val, i ){
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}).get();
};

Here's how I implemented a simple override of $.serializeArray which fixes the default serialization behaviour for checkboxes, and default behaviour is retained for all other types.
In the code below, missed checkboxes are injected into the original serialized array. Checkbox state is returned as "true" (instead of "on") or "false" depending on if it is checked or not.
(function ($) {
var _base_serializeArray = $.fn.serializeArray;
$.fn.serializeArray = function () {
var a = _base_serializeArray.apply(this);
$.each(this.find("input"), function (i, e) {
if (e.type == "checkbox") {
e.checked
? a[i].value = "true"
: a.splice(i, 0, { name: e.name, value: "false" })
}
});
return a;
};
})(jQuery);
You could customize this to return "on"/"off" or true/false.
Update: Fixed code based on bug found by #shyammakwana.me.

you can add a hidden false value for every checkbox:
<input type="checkbox" name="Check01" value="true" /><input name="Check01" type="hidden" value="false" />
<input type="checkbox" name="Check02" value="true" checked="checked" /><input name="Check02" type="hidden" value="false" />
You will only get "false" values for unchecked checkboxes and both "true" and "false" for checked checkboxes, so you can remove the duplicates like this:
var params = {};
$.each($('form').serializeArray(), function (index, value) {
params[value.name] = params[value.name] ? params[value.name] || value.value : value.value;
});
console.log(params); // outputs: {"Check01":"false","Check02":"true"}

I made my own new solution based on the answers by #Pointy, #Ben, and the original jQuery code. The answer from #Pointy had odd behavior that returned contexts for checkboxes, this fixes that problem. The answer from #Ben was also not acting properly because it always returned checkbox = on even if it was unchecked.
$.fn.serializeArrayWithCheckboxes = function() {
var rCRLF = /\r?\n/g;
return this.map(function(){
return this.elements ? jQuery.makeArray( this.elements ) : this;
})
.map(function( i, elem ){
var val = jQuery( this ).val();
if (val == null) {
return val == null
//next 2 lines of code look if it is a checkbox and set the value to blank
//if it is unchecked
} else if (this.type == "checkbox" && this.checked == false) {
return { name: this.name, value: this.checked ? this.value : ""}
//next lines are kept from default jQuery implementation and
//default to all checkboxes = on
} else {
return jQuery.isArray( val ) ?
jQuery.map( val, function( val, i ){
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}
}).get();
};

Using the jQuery plugin serializeJSON, you can use the data-unchecked-value attribute to specify the value when unchecked:
<input type="checkbox" name="Check01" value="true" data-unchecked-value="false" />
<input type="checkbox" name="Check02" value="true" data-unchecked-value="false" checked="checked" />
JavaScript:
$('input').serializeJSON({ parseBooleans: true });
// returns => { 'Check01' : false, 'Check02' : true }

#SNag's answer worker almost 99% just with little bit correction.
Change below line
from :
$.each(this, function (i, e) {
to:
$.each(this.find('input'), function (i, e) {
Explanation: As this was not working because this returned form element. So on form .each won't give us all input elements inside form. So I did this correction and it worked like charm.

Yet Another SerializeArray()
This implementation is again based on jQuery's original code, but I needed it for some Bootstrap's "switch" checkboxes with two different values.
$.fn.serializeArrayWC = function() {
var rCRLF = /\r?\n/g;
return this.map(function(){
return this.elements ? jQuery.makeArray( this.elements ) : this;
})
.map(function(i, elem){
if (this.type == "checkbox") {
// Bootstrap checkboxes with two different values.
if (jQuery(this).hasClass("switched")) {
// Always return value (either on-value or off-value).
return { name: this.name, value: this.value };
}
// Normal checkboxes. Unchecked checkboxed are not returned.
if (!this.checked) {
// This will be removed by the !!f filter, below.
return false;
}
// Return the value, or "on".
return { name: this.name, value: this.value||"on" };
}
var val = jQuery(this).val();
if (val == null) {
return { name: elem.name, value: null };
} else {
return jQuery.isArray(val) ?
jQuery.map( val, function( val, i ){
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}
})
.filter(function(i, f){ return !!f; })
.get();
};

You can append unchecked checkbox data to .serializeArray result:
var formData = $("#mybaseelement").serializeArray();
$('#mybaseelement input[type="checkbox"]:not(:checked)').each(function(i, e) {
formData.push({name: e.getAttribute("name"), value: false});
});
This is the least invasive solution I can come up with.

var fields = $("form").serializeArray();
$('form input[type=checkbox]').map(function() {
if( !this.checked )
{
fields.push({ name: this.name, value: "off" });
}
});

Categories