How to input multiple checkbox values into a hidden textbox via javascript

Question

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.

You'll need a hidden input field, as textareas aren't 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. — Luke Shaheen, Jul 30 '13 at 23:35
What's the ultimate purpose of putting all the values into one hidden input? Perhaps we can suggest a better solution. — Luke Shaheen, Jul 30 '13 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, Jul 31 '13 at 00:17

score 4 · Accepted Answer · answered Jul 31 '13 at 00:04

4

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.net/HarryPehkonen/zNfju/1/

answered Jul 31 '13 at 00:04

Harry Pehkonen

3,038
2
17
19

Hey, could you help me out on one last thing? [I put together this function based on what you have given me.](http://jsfiddle.net/vgMVP/2/) Basically, what I want to do is if a checkbox that toggles a hidden div is unchecked, all of the checkboxes in the div become unchecked. For example, if "DVR" is unchecked, "DVR Problem 1, DVR Problem 2, DVR problem 3" would be unchecked. I tried parsing out some if then statements, but it would either make the checkbox that toggled the div turn off or it would screw up the code. If you could help me out on this, I would be really grateful; thank you! – AlmightyWhy Aug 01 '13 at 06:45
@AlmightyWhy Check out [my update to your jsFiddle](http://jsfiddle.net/vgMVP/3/). Basically, it's using parent() to walk up to the containing div, then finding the sub-checkboxes, turning them off (regardless of the state of the original checkbox). Another trick was to use the Event ("ev") that was passed to the handler by click(). Hope that helps! – Harry Pehkonen Aug 02 '13 at 01:33
It's close, but I am trying to get the something in there where when the parent checkboxes are false, the child checkboxes are false. Can't really wrap my head around it to make it work; I did try to do something along the lines of having the .checkbox("refresh") added in the tags, but it only refreshes the state of the children checkboxes once the parent checkbox has been clicked twice. – AlmightyWhy Aug 06 '13 at 18:45
http://jsfiddle.net/vgMVP/5/ Updated the jsfiddle, it now does what I want it to do; basically the issue I was having was that if you checked one of the parent checkboxes, check a child checkbox, uncheck the parent checkbox, the value of the child checkbox would still appear in the input field at the bottom. I just copied your code at the top to run after the edits you made, and now the children checkboxes uncheck and have the value removed from the text field when the parent checkboxes are unchecked. Hope that makes sense. – AlmightyWhy Aug 06 '13 at 23:53

score 0 · Answer 2 · edited May 23 '17 at 12:23

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

mnsr · Answer 3 · 2013-07-31T00:48:24.077

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.net/mcDvw/

Alternatively, you could set all the values you want into the value attribute of the checkbox and read that instead of having the value in JS variable. e.g.

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.net/mcDvw/1/

How to input multiple checkbox values into a hidden textbox via javascript

3 Answers3