We Keep Coding

How to keep value of check box saved when page reload?

I am having difficulty figuring out how to keep the toggle button yes or no in localStorage even when pages refresh. I also want to keep checked or unchecked the toggle button. Note: I have also tried to use autocomplete="false" but it's not worked that way as well. Anyone can help me? Many Thanks.
HTML
<h1 id="marker" style="text-align: center; padding-bottom:50px;"></h1>
<label class="label-switch switch-primary">
<input type="checkbox" class="switch switch-bootstrap status" name="status" id="status"
onclick="yesno() ">
JS code
function yesno(){
let status = document.getElementById("status");
if(status.checked == true)
{
localStorage.setItem("isChecked", true);
status.checked = true;
location.reload();
}
if(status.checked == false)
{
localStorage.setItem("isChecked", false);
}
}
marker.innerHTML= localStorage.getItem("isChecked");

Here's a working sandbox with the solution you are looking for.
I left the markup untouched, but changed the function to this:
function yesno() {
let statusEl = document.getElementById("status");
localStorage.setItem("isChecked",JSON.stringify(statusEl.checked));
const marker = document.getElementById("marker");
marker.innerHTML = localStorage.getItem("isChecked");
}
And added the following function to mark the checkbox as checked if needed when the page loads:
function onInit() {
const isChecked = JSON.parse(localStorage.getItem("isChecked"))
document.getElementById("status").checked = isChecked
}

How to enable javascript after page loading to change input attribute to disabled depends on other input value that load from database?

I want to write a Javascript code that can disabled my text input after I checked the checkbox. However I also want to run the Javascript code after the page load.
I have tried some Javascript and succeed. The text input will be disabled if I check the textbox. But, I will read from my database whether to check or uncheck the checkbox, the problem here is If the checkbox is checked because of the database. The text input will not be disabled according to the javascript.
<script type="text/javascript">
$('#checker').on('load', function(){
if($(this).is(':checked')){
$('#yourText').prop('disabled', true);
}else{
$('#yourText').prop('disabled', false);
}
});
</script>
I expect if the checkbox is checked like default or from database, the text input will be disabled.

Try this:
$(document).ready(function () {
if(document.getElementById('checker').checked == true)
{
document.getElementById('yourText').disabled = true;
}
else
{
document.getElementById('yourText').disabled = false;
}
});
or you can write it in php
<?php
if([databaseField] == "YES")
{
$checker = "disabled";
}
else
{
$checker = "";
}
?>
<input type="text" name="yourText" id="yourText" $checker>

Checking between two radio buttons with javascript .prop('checked');

I have these two radio buttons and I am checking to see if one of them is checked with the below javascript. As I type this question I realize that my script only checks if a specific radio button is checked. How can I check to verify that one of the two are checked?
jQuery(".GenderM1").each(function() {
var isChecked = jQuery(this).prop('checked');
if (isChecked == false) {
e.preventDefault();
pass = "false";
alert("Please select gender.");
return false;
}
});
<td>
<input type="radio" name="persinfo_gender[0]" <?php if($row_c->persinfo_gender == "0") echo "checked";?> id="maleradio" class="GenderM1" value="0" required>M
<br>
<input type="radio" name="persinfo_gender[0]" <?php if($row_c->persinfo_gender == "1") echo "checked";?> id="female_redio" class="GenderM1" value="1" required>F
</td>

Your code
jQuery(".GenderM1").each(function() {
var isChecked = jQuery(this).prop('checked');
if (isChecked == false) {
e.preventDefault();
pass = "false";
alert("Please select gender.");
return false;
}
});
You're comparing a boolean variable against a boolean value, use it directly:
isChecked == false// Use !isChecked
^
You're using an undeclared e, probably you thin that .each receives an event.
e.preventDefault();
^
The main problem is your loop comparing each radiobutton.checked attribute, you need to check is at least one of then is checked to stop your loop.
This code snippet show how to check if a radiobutton was checked:
var isChecked = false;
jQuery(".GenderM1").each(function() {
isChecked = isChecked || jQuery(this).is(':checked');
if (isChecked)
return false;
});
if (!isChecked) {
var pass = "false";
alert("Please select gender.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="persinfo_gender[0]" class="GenderM1" value="0" required>M
<br>
<input type="radio" name="persinfo_gender[0]" checked class="GenderM1" value="1" required>F
See?, the alert is not being shown when a radiobutton is checked.
Now, the best approach to know whether a radiobutton group has at least one of them checked:
$('.GenderM1:checked').length
The line above returns how many radiobuttons are checked (1 or 0) because you only can select one of then. That selector works with checkboxes as well.

the method .prop() is available since jQuery 1.6, in previous versions you have to use the method .attr()
which version do you use?
Still I think that what you want to do is that if you have not selected a genre that shows an error and with the code you have, it will not work well. To do this you must do the following:
1- Mark one of them selected by default, that is, establish it as checked by default, this eliminates the possibility that the error of not marking it will be committed.
2- Modify the validation you perform, otherwise it will always return false because only one will be selected and you will go through the entire radiobuttons arrangement, so that when you reach the unselected radiobuttons it will return false.
if ($('input[class="GenderM1"]').is(':checked')) {
// do something;
} else {
//do another thing;
}

Multiple checkboxes doesn't get pre-checked with jquery. From Php/ajax

I'm trying to populate multiple checkbox with the help of earlier mysql entries.
I have the data in a variabel:
var = ObjektLevHur;
The data can be: frittlev, frittfabrik or mont.
In my first .change id=1 is ticked. Then if i made a second change id=2 is ticked. etc?!
why?
HTML: Jquery should tick the boxes
<input type="checkbox" name="valt_objekt_lev_hur" id="valt_objekt_lev_hur-1" value="mont">
<input type="checkbox" name="valt_objekt_lev_hur" id="valt_objekt_lev_hur-2" value="mont">
JS: The select2('data').olevhur; is is populating var objektLevHur with: frittlev, frittfabrik or mont.
$(valtObjekt).change(function() {
var objektLevHur = $(valtObjekt).select2('data').olevhur;
if(objektLevHur == "frittlev"){
$('#valt_objekt_lev_hur-0').prop("checked",true);
}
else if(objektLevHur == "frittfabrik"){
$('#valt_objekt_lev_hur-1').prop("checked",true);
}
else if(objektLevHur == "mont"){
$('#valt_objekt_lev_hur-2').prop("checked",true);
}
PHP: "olevhur" is an array created in PHP, then encoded to JSON and sended to JS/AjaxCall
"olevhur"=>$row['objekt_lev_hur'],

first thing i see is that ObjektLevHur is not objektLevHur. change name

The problem was that the checkboxes didn't "un-tick" when a .change was called!
This solved my problem!
if(objektLevHur == "fritt_lev"){
$('#valt_objekt_lev_hur-0').prop("checked",true);
$('#valt_objekt_lev_hur-1').prop("checked",false);
$('#valt_objekt_lev_hur-2').prop("checked",false);
}
else if(objektLevHur == "fritt_fab"){
$('#valt_objekt_lev_hur-0').prop("checked",false);
$('#valt_objekt_lev_hur-1').prop("checked",true);
$('#valt_objekt_lev_hur-2').prop("checked",false);
}
else if(objektLevHur == "mont"){
$('#valt_objekt_lev_hur-0').prop("checked",false);
$('#valt_objekt_lev_hur-1').prop("checked",false);
$('#valt_objekt_lev_hur-2').prop("checked",true);

How to make textbox appear after user selects specific value from dropddown using javascript

I am iterating through an arraylist using jstl library and creating drop down list.
My requirement is that as soon as the user clicks 'Others' which is one of the options in drop down list, an editable text box should appear.
I googled through various sites and tried using java script to solve the probelm but nothing happens on selecting 'Others'.
jsp code:
<form:form method="get" action="ghdgfd">
<c:if test="${fn:length(listOfParams) gt 0}">
<c:forEach var="temp" items="${listOfParams}">
<h3>${temp.paramName}</h3>
<select name="${temp.paramName}" id="${temp.paramName}" class="target1" onchange='CheckColors(this.value,${temp.paramName});'>
<c:forEach var="temp1" items="${temp.listOfParamValue}">
<option><c:out value="${temp1}" /></option>
</c:forEach>
</select>
<input type="text" name="${temp.paramName}" id="${temp.paramName}" style='display:none;'/>
</c:forEach>
<input type="submit" value="Submit">
</c:if>
</form:form>
<script type="text/javascript">
function CheckColors(val1,val2) {
var element = document.getElementById(val2);
if (val == 'Others')
element.style.display = 'block';
else
element.style.display = 'none';
}
</script>
Kindly help..I am new to javascript. Any help will be apprecated!!

In your function, everything is ok. you may place the alert in your if-else block to check which is working and use firebug/chrome developer toolbar to check your jsp is generating the output as expected and not using the same id twice for textarea.
Alternatively, You may use the jQuery solution for this. just replace the below code with your function and remove the onclick event handler from select tag.
jQuery(document).ready(function(){
jQuery('select').each(function(){
jQuery(this).on('change', function(){
var $this = jQuery(this);
if($this.val() === 'Others') {
$this.siblings(':text').show();
} else {
$this.siblings(':text').hide();
}
});
});
});