[quote=“kasperkyd, post:19, topic:296497, full:true”]
Thank you Paul & Paul, you were so helpful, now I have the final code working for me here
I have 2 issues which will be so easy for you 
1- Why the script doesn’t function in Internet Explorer, but it works ok in Edge and Chrome, can this be fixed ![/quote]
Ahh yes, the one that we frequently call internet exploder.
With some simple polyfills in place, Internet Explorer can be told how to do those things that it doesn’t know how to do.
if (!Array.from) {
Array.from = function (els) {
return Array.prototype.splice.call(els, 0);
};
}
if (!Object.prototype.forEach) {
Object.prototype.forEach = function (callback) {
Array.prototype.forEach.call(this, callback);
};
}
There are more complex polyfills available, such as in the compatibility section of Array.forEach, but the ones above will work with the code that we have just fine.
[quote=“kasperkyd, post:19, topic:296497, full:true”]
2- The (readonly) field at the bottom doesn’t pull the input from “Number of Cases” field until any check box is checked,
can we add something to the script that makes the (readonly) input to refresh as soon as “Number of cases” field is updated?[/quote]
Yes there is. There are two possible solutions to this. One is to have each part update things separately by itself, and the other is to have a great behemoth of a function that does everything all at once. The former option is the preferable of the two, for it’s easier to maintain things that way.
Currently the JavaScript code adds an event listener on to each checkbox:
opts.checkboxes.forEach(function (checkbox) {
checkbox.addEventListener("click", showCheckboxesHandler);
});
We just need to add an event listener on to the cases input field too.
opts.cases.addEventListener("change", ...);
Because both the cases and the checkboxes want to update the same form field, it makes sense for each event listener to use the same function that gets the cases number and adds that to the checkbox values.
function updatePackageReference() {
var cases = opts.cases.value;
var checkboxes = Array.from(opts.checkboxes);
opts.targetField.value = cases + " " + joinCheckboxValues(checkboxes, " ");
}
Because we now have cases being added too, it makes sense to remove the join from the joinCheckboxValues function, and to join things together in the updatePackageReference() instead.
// function joinCheckboxValues(checkboxes, connector) {
function checkboxValues(checkboxes) {
return checkboxes
.filter(isChecked)
.map(fieldValue);
// .map(fieldValue)
// .join(connector);
}
...
function updatePackageReference() {
var cases = opts.cases.value;
var checkboxes = Array.from(opts.checkboxes);
// opts.targetField.value = cases + " " + joinCheckboxValues(checkboxes, " ");
opts.targetField.value = [cases].concat(checkboxValues(checkboxes)).join(" ");
}
We just need to give the opts.cases information when running the code:
showCheckboxValues({
cases: document.querySelector("#cases"),
checkboxes: document.querySelectorAll("input[type=checkbox]"),
...
});
and tell each event listener to use the same updatePackageReference() function.
opts.cases.addEventListener("change", updatePackageReference);
opts.checkboxes.forEach(function (checkbox) {
checkbox.addEventListener("click", updatePackageReference);
});
By having each function be responsible for one simple thing, that helps to make the code much easier to update and maintain when changes need to occur.
The updated scripting code is:
if (!Array.from) {
Array.from = function (els) {
return Array.prototype.splice.call(els, 0);
};
}
if (!Object.prototype.forEach) {
Object.prototype.forEach = function (callback) {
Array.prototype.forEach.call(this, callback);
};
}
function isChecked(el) {
return el.checked;
}
function fieldValue(checkbox) {
return checkbox.value;
}
function checkboxValues(checkboxes) {
return checkboxes
.filter(isChecked)
.map(fieldValue);
}
function showCheckboxValues(opts) {
function updatePackageReference() {
var cases = opts.cases.value;
var checkboxes = Array.from(opts.checkboxes);
opts.targetField.value = [cases].concat(checkboxValues(checkboxes)).join(" ");
}
opts.cases.addEventListener("change", updatePackageReference);
opts.checkboxes.forEach(function (checkbox) {
checkbox.addEventListener("click", updatePackageReference);
});
}
showCheckboxValues({
cases: document.querySelector("#cases"),
checkboxes: document.querySelectorAll("input[type=checkbox]"),
targetField: document.querySelector("#PackageRef02")
});
The full working code is demonstrated at https://jsfiddle.net/5fm2v5k4/7/
I will let the other Paul (