We Keep Coding

onchange and onreset handlers not updating css properties on reset

I have a form (which I am incidentally generating in PHP from a database) that is using CSS to replace checkboxes. When a checkbox is checked, the containing <li> should have an outline added, and when unchecked, the outline should be removed. Using onchange events works to change these at a click, but the outlines remain when the form is reset. I added onreset events, to try to force the removal, but that doesn't seem to change anything.
I've recreated this behavior in the snippet. (I have not hidden the checkboxes, as the snippet system apparently does not duplicate the normal browser behavior of clicking on the <label> to set or clear the checkbox. [EDIT: This was my mistake; I set the wrong for on the labels, and now that behavior works. The rest stands.])
How do I make this work? I could have a function that manually sets each outline in a reset function, but, as I said, the checkboxes are created from a database, so I'd have to write the PHP to write the js function, which seems like the wrong way to go.
function doCheckboxes(clicked_id) {
if (document.getElementById(clicked_id).checked) {
document.getElementById(clicked_id).parentNode.style.outline = "2px solid black";
} else {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
}
function clearCheckboxes(clicked_id) {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
li {
display: inline-block;
margin: 10px;
text-align: center;
font-weight: 600;
}
.imageholder {
display: block;
height: 60px;
width: 60px;
background-repeat: no-repeat;
background-clip: content-box;
background-size: cover;
margin: auto;
}
.has-thing1 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing2 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing3 .imageholder {
background-image: url(path/to/image.png);
}
<form action="." method="get">
<fieldset class="subcategory">
<ul>
<li class="has-x has-thing1">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing1" name="has[]" value="thing1">
<label for="x_thing1">
<div class="imageholder"> </div>
Thing1
</label>
</li>
<li class="has-x has-thing2">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing2" name="has[]" value="thing2">
<label for="x_thing2">
<div class="imageholder"> </div>
Thing2
</label>
</li>
<li class="has-x has-thing3">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing3" name="has[]" value="thing3">
<label for="x_thing3">
<div class="imageholder"> </div>
Thing3
</label>
</li>
</ul>
</fieldset>
<div>
<button type="submit">Submit</button></div>
<button type="reset">Clear Selection</button>
</form>

Create function clearAllCheckboxes
function clearAllCheckboxes(evt) {
const formEl = evt.closest('form')
const allCheckbox = formEl.querySelectorAll('[type=checkbox]')
allCheckbox.forEach(checkbox => {
checkbox.parentNode.style.outline = "0 none black"
})
}
Add an onClick handler to the button "Clear Selection"
<button type="reset" onClick="clearAllCheckboxes(this)">Clear Selection</button>

Blur/unblur action on input clearance

I have the situation where I want to blur and unblur a background dynamically based on the inclusion of text in an input.
The unblur happens nicely, however, the re-blur on clearance of the input is not working? Not sure if I've just been staring at this too long, but hitting up SO because I'm slowly going insane looking at this. Thanks in advance for any help!
Code below:
<div>
<form name="search" class="searchBarClass" action="/action_page.php" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="searchInput" onkeyup="unblur();blur();">
<button type="submit"><span class="material-icons">search</span></button>
</form>
</div>
<div id="background"></div>
Script for update:
function unblur() {
document.getElementById("background").style.filter = "none";
}
function blur() {
var x = document.forms["search"]["searchInput"].value;
if (x === "") {
document.getElementById("map").style.filter = "blur(2px)";
}
}

The intention is to blur the background whenever the input is empty. Here's some minimal code that accomplishes that:
const bgDiv = document.getElementById("background");
// blur background image when input is empty
function blurOnEmptyInput() {
var x = document.forms["search"]["searchInput"].value;
if (x === "") {
bgDiv.classList.add('blur');
} else {
bgDiv.classList.remove('blur');
}
}
/* style with CSS instead of embedding in JavaScript function */
.bg-image {
background-image: url("https://picsum.photos/300/100");
height: 100px;
width: 300px;
border: 1px solid gray;
}
.blur {
filter: blur(2px);
}
div {
margin: 1rem 0 0 1rem;
}
<div>
<form name="search">
<input placeholder="Search.." name="searchInput"
onkeyup="blurOnEmptyInput();">
</form>
</div>
<div id="background" class="bg-image blur"></div>

javascript/jquery onChange function for div.text to update form hidden field value

My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks

This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>

With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)

So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end

Bootstrap Jquery/Ajax Inline Edit when clicking Edit button

Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db.
My code:
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>
Any help would be appreciated Thanks!!

I would probably just use contentEditable, if possible.
document.addEventListener('DOMContentLoaded', function(){
var btn = document.getElementById("editButton");
btn.addEventListener("click", function(){
var editLabel = document.getElementById("editLabel");
editLabel.contentEditable = true;
editLabel.className = "editActive";
});
});
#editLabel{
margin-bottom: 25px;
display: inline-block;
padding: 5px;
box-sizing: border-box;
}
#editButton{
display: block;
}
.editActive{
border: 1px inset #e3e3e3;
cursor: text;
}
<label id="editLabel">Hello World</label>
<button id="editButton">Edit Label</button>

I wouldn't recommend doing it inline. As you can see the result will not be clean. This will work though.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;" value="myInput">
<button onclick="$('label').text($('input').val())">edit</button>

how do you deselect "all" selector if one input is deselected

I have a search filter that will toggle all the filters on if selected. My problem is, if you deselect all or one of the filters, the all button still stays on. How can I make it so if a filter or all the filters are deselected, the all button will automatically deslect itself.
function togglecheckboxes(master,group){
var cbarray = document.getElementsByClassName(group);
for(var i = 0; i < cbarray.length; i++){
var cb = document.getElementById(cbarray[i].id);
cb.checked = master.checked;
}
}
#search_attributes {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-top: 5.5em;
padding-left: 1em;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background: none;
height: 50px;
width: 72px;
display:inline-block;
cursor: pointer;
padding: 0 0 0 0px;
filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
-moz-filter: grayscale(1);
-webkit-filter: grayscale(1);
}
input[type=checkbox]:checked + label {
background: none;
height: 50px;
width: 72px;
display:inline-block;
cursor: pointer;
padding: 0 0 0 0px;
filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
-moz-filter: grayscale(0);
-webkit-filter: grayscale(0);
-o-transition:.1s;
-ms-transition:.1s;
-moz-transition:.1s;
-webkit-transition:.1s;
}
<div id="search_attributes">
<section>
<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1">
<label for="cb1_1">
<img src="images/oneshot_selector.png" />
</label>
<input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2">
<label for="cb1_2">
<img src="images/loop_selector.png" />
</label>
</section>
<section>
<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')">
<label class="all" for="cbgroup1_master">
<img src="images/all_selector.png" />
</label>
</section>
<section>
<input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3">
<label for="cb1_3">
<img src="images/sfx_selector.png" />
</label>
<input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4">
<label for="cb1_4">
<img src="images/music_selector.png" />
</label>
</section>
</div>

Simple! Your goal is to change the master based on the following...
if a checkbox is unchecked, make sure the master is unchecked too
otherwise, make sure that all checkboxes are checked before the master is checked
Translated to jQuery:
$(".cbgroup1").on("change", function () {
var $checkbox = $(this),
$checkboxes = $("#search_attributes").find(".cbgroup1"),
$master = $("#cbgroup1_master");
if (!$checkbox.is(":checked")) {
$master.prop("checked", false);
} else {
if ($checkboxes.length === $checkboxes.filter(":checked").length) {
$master.prop("checked", true);
}
}
});
JSFiddle: http://jsfiddle.net/6rc9p0qm/
Done!

I don't really see any jquery here, but since you have the tag, I shall use it!
First, we can slightly alter the html:
<input type="checkbox" id="cbgroup1_master" data-group="cbgroup1">
Then we can move the binding into the javascript (btw, i'm not proposing you put your function definition in the ready function, but just keeping the code together):
$(document).ready(function() {
function togglecheckboxes() {
var $this = $(this);
$('.'+ $this.data('group')).prop('checked', $this.is(':checked'));
}
$('#cbgroup1_master').on('change', togglecheckboxes);
});
That will set the checked status of the associated group to match the parent. Now for the children to undo the parent. We can slightly change their structure to help too:
<input type="checkbox" id="cb1_1" class="cbgroup" name="cbg1[]" value="1" data-group="1">
Then in the ready function we can bind to them with the shared class.
$('.cbgroup').on('change', function() {
var $this = $(this);
if (!$this.is(':checked')) {
$('#cbgroup'+ $this.data('group') +'_master').prop('checked', false);
}
});
This, in the case that a cbgroup changes, it will change its parent to unchecked (if it was originally checked), based on the data-group to know which parent to go to.
Since you did not have any jquery in your example, just to make sure you are informed, I'll include the following. If this is a "duh" to you, I'm sorry, :).
With jquery, in a selector (ex. $('selector') ), using $('.string') will find all elements where 'string' is a class of theirs. Using $('#string') will find the element where 'string' is the id.