Here's my code:

<script type="text/javascript" xml:space="preserve">

function ATHD(f) {

var aa = "I would like help with the following topic(s): "
var bb = "Password Reset "
var cc = "Password Setup " 
var dd = "Firmware Upgrade (if applicable) "
var ee = "Local Access Setup "
var ff = "Remote Access Setup "
var gg = "Mobile Access Setup "
var hh = "Recording Schedule Setup "
var ii = "How to playback video "
var jj = "How to convert video "
var kk = "Email Notification Setup "
var ll = "PTZ Setup (if applicable) "

if( f.pr.checked == true) {
    f.sup.value = aa + bb;
}
if( f.ps.checked == true) {
    f.sup.value = aa + cc;
}


}

</script>
<form><input onclick="ATHD(this.form)" id="1" type="checkbox" name="pr" />&#160;Password Reset<br />
<input onclick="ATHD(this.form)" id="2" type="checkbox" name="ps" />&#160;Password Setup<br />
<input onclick="ATHD(this.form)" id="3" type="checkbox" name="fu" />&#160;Firmware Upgrade (if applicable)<br />
<input onclick="ATHD(this.form)" id="4" type="checkbox" name="la" />&#160;Local Access Setup<br />
<input onclick="ATHD(this.form)" id="5" type="checkbox" name="ra" />&#160;Remote Access Setup<br />
<input onclick="ATHD(this.form)" id="6" type="checkbox" name="ma" />&#160;Mobile Access Setup<br />
<input onclick="ATHD(this.form)" id="7" type="checkbox" name="rss" />&#160;Recording Schedule Setup<br />
<input onclick="ATHD(this.form)" id="8" type="checkbox" name="pb" />&#160;How to playback video<br />
<input onclick="ATHD(this.form)" id="9" type="checkbox" name="cv" />&#160;How to convert video<br />
<input onclick="ATHD(this.form)" id="10" type="checkbox" name="en" />&#160;Email Notification Setup<br />
<input onclick="ATHD(this.form)" id="11" type="checkbox" name="ptz" />&#160;PTZ Setup (if applicable)<br />
<br />
<span style="FONT-WEIGHT: bold">Question</span><span style="COLOR: #ff0000">*</span> (please be specific)<br />
<br />
<textarea style="HEIGHT: 164px; WIDTH: 577px" rows="10" cols="40">
</textarea></p>

<p><button>Continue...</button> 
<textarea style="HEIGHT: 164px; DISPLAY: hidden; WIDTH: 577px" rows="10" cols="40" name="sup">
</textarea>
 &#160;</p>
</form>

Basically, what I am looking to do is to whenever a box is checked, I want the value of the checkbox to be added into a hidden field. I understand that I still need to add the "value=[the value of the checkbox]" in the html code; what I want to allow for is multiple checkboxes to be selected so that multiple items will get added to the textbox.

I understand that one way of doing this would be to be to create if-then statements for every possible variation; this would not be very time effective as there would be thousands of permutations.

I am also trying to figure out if using an array would work to simplify this; I am not really sure how to conceptualize this in the simplest way as I have only been doing javascripting for three weeks. If someone can tell me how to think about this, I would greatly appreciate it. Looking more to learn how to do this so I can contribute to these forums and simplify the process of scripting functions as I do not have a background in coding.

Here's my code:

<script type="text/javascript" xml:space="preserve">

function ATHD(f) {

var aa = "I would like help with the following topic(s): "
var bb = "Password Reset "
var cc = "Password Setup " 
var dd = "Firmware Upgrade (if applicable) "
var ee = "Local Access Setup "
var ff = "Remote Access Setup "
var gg = "Mobile Access Setup "
var hh = "Recording Schedule Setup "
var ii = "How to playback video "
var jj = "How to convert video "
var kk = "Email Notification Setup "
var ll = "PTZ Setup (if applicable) "

if( f.pr.checked == true) {
    f.sup.value = aa + bb;
}
if( f.ps.checked == true) {
    f.sup.value = aa + cc;
}


}

</script>
<form><input onclick="ATHD(this.form)" id="1" type="checkbox" name="pr" />&#160;Password Reset<br />
<input onclick="ATHD(this.form)" id="2" type="checkbox" name="ps" />&#160;Password Setup<br />
<input onclick="ATHD(this.form)" id="3" type="checkbox" name="fu" />&#160;Firmware Upgrade (if applicable)<br />
<input onclick="ATHD(this.form)" id="4" type="checkbox" name="la" />&#160;Local Access Setup<br />
<input onclick="ATHD(this.form)" id="5" type="checkbox" name="ra" />&#160;Remote Access Setup<br />
<input onclick="ATHD(this.form)" id="6" type="checkbox" name="ma" />&#160;Mobile Access Setup<br />
<input onclick="ATHD(this.form)" id="7" type="checkbox" name="rss" />&#160;Recording Schedule Setup<br />
<input onclick="ATHD(this.form)" id="8" type="checkbox" name="pb" />&#160;How to playback video<br />
<input onclick="ATHD(this.form)" id="9" type="checkbox" name="cv" />&#160;How to convert video<br />
<input onclick="ATHD(this.form)" id="10" type="checkbox" name="en" />&#160;Email Notification Setup<br />
<input onclick="ATHD(this.form)" id="11" type="checkbox" name="ptz" />&#160;PTZ Setup (if applicable)<br />
<br />
<span style="FONT-WEIGHT: bold">Question</span><span style="COLOR: #ff0000">*</span> (please be specific)<br />
<br />
<textarea style="HEIGHT: 164px; WIDTH: 577px" rows="10" cols="40">
</textarea></p>

<p><button>Continue...</button> 
<textarea style="HEIGHT: 164px; DISPLAY: hidden; WIDTH: 577px" rows="10" cols="40" name="sup">
</textarea>
 &#160;</p>
</form>

Basically, what I am looking to do is to whenever a box is checked, I want the value of the checkbox to be added into a hidden field. I understand that I still need to add the "value=[the value of the checkbox]" in the html code; what I want to allow for is multiple checkboxes to be selected so that multiple items will get added to the textbox.

I understand that one way of doing this would be to be to create if-then statements for every possible variation; this would not be very time effective as there would be thousands of permutations.

I am also trying to figure out if using an array would work to simplify this; I am not really sure how to conceptualize this in the simplest way as I have only been doing javascripting for three weeks. If someone can tell me how to think about this, I would greatly appreciate it. Looking more to learn how to do this so I can contribute to these forums and simplify the process of scripting functions as I do not have a background in coding.

• javascript
• html
• checkbox

• You'll need a hidden input field, as textareas aren't hidden. <input type="hidden" />. Also, did you want the value of the checkbox to be REMOVED from the hidden text if the checkbox gets unchecked? That will actually be the harder part. – James Glass Commented Jul 30, 2013 at 23:35
• What's the ultimate purpose of putting all the values into one hidden input? Perhaps we can suggest a better solution. – James Glass Commented Jul 30, 2013 at 23:36
• I am building a mock up of a form for our technical support website; we have a standardized list of documents for basic topics that I want to give our customers the option of picking so our agents will know to send these documents in advance. I forgot to put in the html "display:none"; this is actually going to be a field that we will end up programming to correspond to a data table, but for the mock up, I am just using a text area. I am more worried about how to have the multiple checkbox values get input into a text field without having to write a crazy amount of scripting. – AlmightyWhy Commented Jul 31, 2013 at 0:17

3 Answers 3

If you can use jQuery, you won't need much code:

You could update the results whenever somebody clicks on a checkbox ($('input').on('click', function() {).

I personally would use <label> elements, but that's just me. You could grab the values by

$('input:checked').each(function() {
    values.push($(this).parent().text());
});

Here is a working example: http://jsfiddle/HarryPehkonen/zNfju/1/

I have made small changes your dom like removing onclick events and It may solve your problem

var arr = [];
remove_item = function(arr,value){
    for(b in arr ){
        if(arr[b] == value){
            arr.splice(b,1);
            break;
        }
    }
    return arr;
}
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
    if(inputs[i].getAttribute('type') == 'checkbox')
    {  inputs[i].addEventListener("change",function() {
        if(this.checked)
            arr.push(parseInt(this.id));
        else
        {
            remove_item(arr,parseInt(this.id));
        }
            console.log(arr);  document.getElementById("chcbx").value = arr.join(",");
        },false);
    }
}

and have a look at jsFiddle remove_item

Here's another way of doing it.

// find number of checkboxes (you haven't specified if you 
// have a set number or not. If you have a set number, just 
// set checkboxCount to whatever number you have.
var checkboxCount = 0;
var inputTags = document.getElementsByTagName('input');
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}

function ATHD() {
    var totalValue = '';
    for (var i = 1; i < checkboxCount; i++) {
        if (document.getElementById(i).checked)
            totalValue += inputTags[i].getAttribute("name") + ';';
    }
    document.getElementById("hdnValues").value = totalValue;
    alert(totalValue);
}

This basically counts all the checkboxes, loops through all, checks if they're checked, gets the value of the name attribute, then appends it to a string which is delimited by ;

jsfiddle: http://jsfiddle/mcDvw/

HTML:

<input onclick="ATHD()" id="1" type="checkbox" name="pr" value="Password Reset" />&#160;Password Reset<br />
<input onclick="ATHD()" id="2" type="checkbox" name="ps" value="Password Setup" />&#160;Password Setup<br />

JS:

function ATHD() {
    var totalValue = '';
    for (var i = 1; i < checkboxCount; i++) {
        if (document.getElementById(i).checked)
            totalValue += inputTags[i].value + ';';
    }
    document.getElementById("hdnValues").value = totalValue;
    document.getElementById("showValues").value = totalValue;
}

jsfiddle: http://jsfiddle/mcDvw/1/