[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 200
  • Last Modified:

Quick Checkbox solution

Easy one for you all:

I have a bunch of sets of checkboxes. The first named chkVol1, chkVol2, chkVol3, and so on. When the user submits the form, I just want to write out to a variable all of the values of each checkbox in that group that is checked.

For example:

<input type="checkbox" name="chkVol1" value="Family Needs" class="tenpix"> Family Needs<br>
<input type="checkbox" name="chkVol2" value="Return to College or School" class="tenpix"> Return to College/School<br>
<input type="checkbox" name="chkVol3" value="More Money" class="tenpix"> More Money<br>
<input type="checkbox" name="chkVol4" value="Relocation" class="tenpix"> Relocation<br>
<input type="checkbox" name="chkVol5" value="Schedule Conflicts" class="tenpix"> Schedule Conflicts<br>
<input type="checkbox" name="chkVol6" value="Work Too Many or too Few Hours" class="tenpix"> Work Too Many/Few Hours

If 1, 3, and 5 are checked then the variable I will read from will contain the following:

Family Needs
More Money
Schedule Conflicts

Thank you. I know easy. Arrays confuse the heck out of me for some reason and I need this asap ... Grrrr Easy 500 for yas.

Thanks in advance,
Chris
0
Chris24
Asked:
Chris24
  • 4
  • 3
  • 2
  • +1
1 Solution
 
ThinkPaperCommented:
You can do something like:

<script language="javascript">

function writeStuff()
{
document.write (document.myform.chkVol1.value);
document.write (document.myform.chkVol2.value);
document.write (document.myform.chkVol3.value);
document.write (document.myform.chkVol4.value);
document.write (document.myform.chkVol5.value);
}
</script>


<form name="myform" onSubmit="writeStuff();">

if it's not checked it should be blank.
0
 
0h4crying0utloudCommented:
Or this?


<body>
      <input checked="checked" type="checkbox" name="chkVol1" value="Family Needs" class="tenpix"> Family Needs<br>
      <input type="checkbox" name="chkVol2" value="Return to College or School" class="tenpix"> Return to College/School<br>
      <input  checked="checked" type="checkbox" name="chkVol3" value="More Money" class="tenpix"> More Money<br>
      <input type="checkbox" name="chkVol4" value="Relocation" class="tenpix"> Relocation<br>
      <input type="checkbox" name="chkVol5" value="Schedule Conflicts" class="tenpix"> Schedule Conflicts<br>
      <input  checked="checked" type="checkbox" name="chkVol6" value="Work Too Many or too Few Hours" class="tenpix"> Work Too Many/Few Hours
</body>


<script>
var all_inputs = document.getElementsByTagName("input");
var valString = ""

for (var input_idx="0"; input_idx < all_inputs.length; input_idx++) {
  if (all_inputs[input_idx].type == "checkbox" && all_inputs[input_idx].checked == true) {
    valString += all_inputs[input_idx].value + ", ";
  }
}

alert(valString);
</script>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Chris24Author Commented:
I want to do it in a loop instead of hard coding each and every checkbox. I'll have many groups in this one form ... approx 14 and each containing approx 16 checkboxes.
0
 
0h4crying0utloudCommented:


can you add a class name to each group? or put each group in a fieldset (that would be best)?  that would be a good way of distiguishing them.

Here's an example:

function getValString( className) {
  var all_inputs = document.getElementsByTagName("input");
  var valString = ""

  for (var input_idx="0"; input_idx < all_inputs.length; input_idx++) {
    if (all_inputs[input_idx].type == "checkbox" && 
           all_inputs[input_idx].className == "group1" && 
           all_inputs[input_idx].checked == true) {
      valString += all_inputs[input_idx].value + ", ";
    }
  }
  return valString;
}

</script>
0
 
Chris24Author Commented:
And I want to loop through each separately i.e. all checkboxes named chkVol(i) then separately all in chkInVol(i) and so on ...

mplungjan or zvonko where are ya??? lolol

Thanks,
Chris
0
 
0h4crying0utloudCommented:


oh man that's some ugly coding dude. if you wrap you checkboxes in any ID'd container.. div, fieldset, td... whatever... there is a quick, and elegant solution using this:

var checkBox_group = document.getElementById("chk_container1").getElementsByTagName("input");

 for (var i="0"; i < checkBox_group.length; i++) {
      if (checkBox_group[i].checked == true) {
        valString += checkBox_group[i].value + ", ";
      }
}

Can you think of what the alternative will look like? *yuck*
0
 
Chris24Author Commented:
thx cryingoutloud. With some mods, I was able to make it work:

function chkCheckboxGroups(theGroup) {

var theInputs = document.getElementById(theGroup);
var checkBox_group = document.getElementsByTagName("input")
var valString = ""

 for (var i="0"; i < checkBox_group.length; i++) {
      if (checkBox_group[i].checked == true) {
        valString += checkBox_group[i].value + "\n";
      }
}
alert(valString)
}
0
 
Pravin AsarCommented:
Here is my solution.

1. Take form, cycles through for all checkboxes.
2. Groups them per names
3. Extracts the values for each checked checkbox



<html>
<head>
<title>CheckBox Values</title>
</head>

<body>
<script language="javascript">
var chkNames = new Array();
var chkValues = new Array();
var chkCnt = 0;
function ResetCounters() {
      chkCnt =0;
}
function UpdateFieldList (chkObj) {
      var bFound = false;
      for (var rx=0; rx < chkCnt; rx++)  {
            if (chkObj.name.match(chkNames[rx])) {
                  bFound = true;
                  break;
            }
      }
      if (!bFound) {
            chkNames[chkCnt] = chkObj.name;
            chkValues[chkCnt]  = '';
            chkCnt++;
      }
}

function UpdateValueList (chkObj) {
      for (var rx=0; rx < chkNames.length; rx++)  {
            if (chkObj.name.match(chkNames[rx])) {
               if (chkValues[rx].length) { chkValues[rx] += ','; }
                  chkValues[rx] += chkObj.value;
                  break;
            }
      }
}
function CheckForSelection () {
      var retCode = true;
      for (var rx=0; rx < chkValues.length; rx++)  {
            if (!chkValues[rx].length) {
                  alert ('Checkbox Button ' + chkNames[rx] + ' is not selected');
                  retCode = false;
            }
      }
      //if (retCode) { alert ('Every thing Okay');  }
   for (ix=0; ix < chkValues.length; ix++) {
      alert ('CheckBox Name ' + chkNames[ix] + ' Values : ' + chkValues[ix]);                      
      }
      
      return (retCode);
}

function validatePage(form) {
   ResetCounters();
   var elems = form.elements;
   for (var ix=0; ix < elems.length; ix++) {
               var elem = elems[ix];
            if (elem.type.match('checkbox')) {
                  UpdateFieldList(elem);
                  if (elem.checked) {
                        UpdateValueList(elem);
                  }
            }
   }
   return (CheckForSelection());
}
</script>
<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="checkbox" name="chkQ_1" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="checkbox" name="chkQ_1" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="checkbox" name="chkQ_1" value="3"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="checkbox" name="chkQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="checkbox" name="chkQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="checkbox" name="chkQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="checkbox" name="chkQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="checkbox" name="chkQ_2" value="5"></td>
     </tr>
</table>
<input type="button" value="Get Values" onClick="return (validatePage(this.form));">
</form>
</body>
</html>


0
 
Pravin AsarCommented:
Too late...

0
 
0h4crying0utloudCommented:


Thanks Chris you got it but I think you need to use your "theInputs" var in line follwing it or you will not get inputs specific to that container.

function chkCheckboxGroups(theGroup) {

var theInputs = document.getElementById(theGroup);
var checkBox_group = theInputs.getElementsByTagName("input");  // Here I use "theGroup" instead of "document"
var valString = ""

 for (var i="0"; i < checkBox_group.length; i++) {
      if (checkBox_group[i].checked == true) {
        valString += checkBox_group[i].value + "\n";
      }
}
alert(valString)
}
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now