[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Counting checked (dynamically-generated) checkboxes with the same name

Posted on 2007-10-02
5
Medium Priority
?
577 Views
Last Modified: 2012-08-14
Hi there. I have a web form dynamically generated from a ColdFusion/SQL Server back end. The form is used to edit database records which may have associated images. If so, the ColdFusion generates a checkbox on the form for each image, to allow the user to say he wants to delete that image. No matter how many checkboxes there are, each of them is named "DeleteImageFilename," with a unique value (because ColdFusion will present these as a comma-delimited list, so it makes it easy to work with an unknown number of values on the back end).

Now I need to change the form to disallow users to delete ALL images. At least one must be left---unless they've filled out another form field, called ImageFilename, to supply a new image to take the place of all those they are deleting. So I need to enhance the existing JavaScript validation on this form to basically say "if there are more than 0 checkboxes named DeleteImageFilename, and if all of those checkboxes are checked, and if the value of ImageFilename is blank, then (do some stuff)." How would I write this conditional? Thanks!
0
Comment
Question by:Sapphireblue
  • 3
5 Comments
 
LVL 11

Accepted Solution

by:
Isisagate earned 2000 total points
ID: 19999056
you can grab all the input boxes by doing this...

var ary = document.getElementsByTagName("INPUT");
var countChecked =0;

for(var x=0; x<ary.length; x++ )
{
 if(ary[x].name.indexOf("DeleteImageFilename") != -1 && ary[x].checked == true) countChecked++;
}


then just test the other being blank and count being 0 and you should be there
0
 
LVL 1

Author Comment

by:Sapphireblue
ID: 19999086
There are other, non-image-related checkboxes on the form.
0
 
LVL 1

Author Comment

by:Sapphireblue
ID: 19999093
oh wait, I may've spoke too soon. Let me play with that.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 19999129
Here is a comprehensive example/tutorial code...


<html>
<head>
<title>Checkbox Validate</title>
</head>

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

function UpdateValueList (radObj) {
      for (var rx=0; rx < radNames.length; rx++)  {
            if (radObj.name.match(radNames[rx])) {
                  radValues[rx] = radObj.value;
                  break;
            }
      }
}
function CheckForSelection () {
      var retCode = true;
      for (var rx=0; rx < radValues.length; rx++)  {
            if (!radValues[rx].length) {
                  alert ('Check Box ' + radNames[rx] + ' is not selected');
                  retCode = false;
            }
      }
      if (retCode) { alert ('Every thing Okay'); }
      alert (radValues.length);      
      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());
}

function ValidateForm(form) {
      var vaLst = "";
      for (ix=0; ix < form.rdoQ_1.length; ix++) {
            if (form.rdoQ_1[ix].checked) {
                  vaLst += form.rdoQ_1[ix].value + ",";
        }
    }
      if (!vaLst.length) {
            alert ('No options selected');
      }
      else if (vaLst.match(/val1/) && vaLst.match(/val4/)) {
            alert ('Checked Options 1 and 4');
    }
    else if (vaLst.match(/val1/))
    {
            alert ('Checked Option 1');
    }
      else if (vaLst.match(/val4/)) {
            alert ('Checked Option 4');
    }
    else {
            alert ('Options 1 and 4 are NOT checked');
    }
    return false;
}
</script>
<pre>
Scan the form.
Gathers all checkboxes with Unique names
Makes sure at least one is checked.
</pre>

<form name="myForm">
<table>
     <tr>
          <td align="right">Question 1:</td>
     </tr>
     <tr>
          <td>1 -- <input type="checkbox" name="rdoQ_1" value="val1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="checkbox" name="rdoQ_1" value="val2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="checkbox" name="rdoQ_1" value="val3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="checkbox" name="rdoQ_1" value="val4"></td>
     </tr>
     <tr>
          <td align="right">Question 2:</td>
     </tr>
     <tr>
          <td>1 -- <input type="checkbox" name="rdoQ_2" value="1"></td>
     </tr>
     <tr>
          <td>2 -- <input type="checkbox" name="rdoQ_2" value="2"></td>
     </tr>
     <tr>
          <td>3 -- <input type="checkbox" name="rdoQ_2" value="3"></td>
     </tr>
     <tr>
          <td>4 -- <input type="checkbox" name="rdoQ_2" value="4"></td>
     </tr>
     <tr>
          <td>5 -- <input type="checkbox" name="rdoQ_2" value="5"></td>
     </tr>
</table>
<br>
<input type="button" value="Submit" onClick="return (ValidateForm(this.form));">
</form>
</body>
</html>
0
 
LVL 1

Author Comment

by:Sapphireblue
ID: 19999353
Isisagate: close enough. I needed not to check that the count was 0, but only lower than the total number of checkboxes with that name. Still I was able to modify your stuff to make it go, so, thanks!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question