Pass an array of checkbox values to a Javascript string - html

Question

What I want to happen with the following code is when a user checks multiple data centers and then selects a type of change it will automatically refresh the description and Impact text area with a unique string statement including the data centers the user has chosen.
Can someone advise me what I am doing wrong?
JS:
function updateDescImpact() {
var changeSel = document.changeform.change_type;
var ChangeType = (changeSel.options[changeSel.selectedIndex].value);
var description = " ";
var impact = " ";
var data_center = "";
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++) {
{
if (inputs[x].type == "checkbox" && inputs[x].name == 'data_center[]') {
if (inputs[x].checked == true) {
data_center += inputs[x].value + ',';
}
}
}
if (/,$/.test(data_center)) {
data_center = date_center.replace(/,$/, "")
}
if (ChangeType == "Filer Changes") {
description = "This is the Filer Change Description for $('data_center')";
impact = "This is the Filer Changes impact statement for $('data_center')";
} else if (ChangeType == "DNS Changes") {
description = "This is the DNS Change Description for $('data_center')";
impact = "This is the DNS Changes impact statement for $('data_center')";
} else {
description = "";
impact = "";
}
document.changeform.description.value = description;
document.changeform.impact.value = impact;
}
HTML:
<form action="" id="changeform" method="post" name="changeform">
<input type="submit" value="submit change">
<table>
<tr valign="top">
<td><strong>Data Center</strong></td>
<td><input name="data_center[]" type="checkbox" value="zone1">Zone1
<input name="data_center[]" type="checkbox" value=
"Zone2">Zone2</td>
</tr>
<tr valign="top">
<td><strong>Change Type</strong></td>
<td><select id="change_type" name="change_type" onchange=
"updateDescImpact()">
<option value="DNS Changes">
DNS Changes
</option>
<option value="Filer Changes">
Filer Changes
</option>
</select></td>
</tr>
<tr valign="top">
<td><strong>Description</strong></td>
<td>
<textarea cols="50" id="description" name="description" rows="10">
This text needs to be updated
</textarea>
</td>
</tr>
<tr valign="top">
<td><strong>Service Impact</strong></td>
<td>
<textarea cols="50" id="impact" name="impact" rows="10">
This text needes to be updated
</textarea></td>
</tr>
</table>
</form>

Answer 1

With only a minimal idea of what it is you want to do with the string, once you've got it, I've put together the following:
function updateDescImpact() {
// declaring all the variables, separating them with commas, at once.
// retrieves the element:
var changeSel = document.getElementById('change_type'),
// defines the various default messages:
changes = {
'DNS': {
'impact': 'This is the DNS Change impact statement for $("data_centre")',
'description': 'This is the DNS Change Description for $("data_center")'
},
'Filer': {
'impact': 'This is the Filer Changes impact statement for $("data_centre")',
'description': 'This is the Filer Change Description for $("data_center")'
}
},
ChangeType = (changeSel.options[changeSel.selectedIndex].value),
// creates an array:
data_center = [],
inputs = document.getElementsByTagName('input');
for (var x = 0, len = inputs.length; x < len; x++) {
{
if (inputs[x].type == "checkbox" && inputs[x].name == 'data_center[]') {
if (inputs[x].checked === true) {
// adds the checkbox-values to the array:
data_center.push(inputs[x].value);
}
}
}
// creates another key for the 'changes' object,
// the value of which is determined by whether the array contains values,
// if it *does*, then those values are joined together using the given string,
// if *not*, then the value is an empty string.
// in both cases the value is followed by a period.
changes.data_centers = (data_center.length > 0 ? ': ' + data_center.join(', ') : '') + '.';
document.getElementById('description').value = changes[ChangeType].description + changes.data_centers;
document.getElementById('impact').value = changes[ChangeType].impact + changes.data_centers;
}
}
JS Fiddle demo.
In the next part I'll try to explain the changes I've made, but the simple, central, premise is to minimise the amount of work you're doing, and to reduce the scope for errors to creep in.
Where you were using:
document.changeform.change_type;
I've chosen, instead, to use:
var changeSel = document.getElementById('change_type');
This is because using the id of the relevant element is faster than navigation through the DOM using two ids, especially since there's no guarantee that the element will be recognised by its id when it's used as a global variable without being declared. It works almost everywhere, yes, but it's not a standard, or specified, behaviour in JavaScript and was a convenience offered, initially, in Internet Explorer. This convenience is not guaranteed to present in future, however.
Also, an id is (and must be) unique within the document, therefore there's no sense in using two, when one will do perfectly well.
The use of an object to contain the various alternative strings you (might) want to use, this is to reduce the need for multiple if/else if/else statements. And makes it somewhat easier to update the function in future to address new options and requirements. As stated, above, this is to minimise the amount of work you have to do (now, and in the future).
Where you used:
if (/,$/.test(data_center)) {
data_center = date_center.replace(/,$/, "")
}
I chose, instead, to use an array:
data_center = [],
This allows us to avoid having to use regular expressions which, while in this case was simple enough, is not always the case and, again, is more difficult than necessary for the finished result. Whereas an array can use the .join() method (used later) which will join the array elements together with the defined string, and will not result in a trailing-comma.
I've also used getElementById() in the last two lines to assign the various strings/values to the relevant elements. For precisely the same reason as outlined above.