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

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

How do I modify this javascript array to make it function correctly in my php application?

Hi

The script attached will let me check a master checkbox and it will then check all or uncheck all  all the other checkboxes on the page, but I want it to work differently.

I have coded the attached mock u imagep, so each section/fieldset in my form will have a row of select all/none checkboxes
I have updated the id's for the checkboxes in each section/fieldset so they [the checkboxes] will include the id number of the corresponding field set

so for example the 'id' for the Project Details fieldset is 52, now the checkboxes in that section are
 id="52-200-displayatcopyrequest"
id="52-200-displayatlist"
id="52-200-required"

the 'id' for the Vcom fieldset is 12, the checkboxes in that section are
 id="12-156-displayatcopyrequest"
id="12-156-displayatlist"
id="12-156-required"

and so on....

This is the code on the 'all/none' checkboxes that are highlighted in gold in each fieldset
<input type="checkbox" onclick="checkAll(" displayatlist',="" this);'="" value="">
<input type="checkbox" onclick="checkAll(" displayatcopyrequest',="" this);'="" value="">
<input type="checkbox" onclick="checkAll(" required',="" this);'="" value="">

so the user should be able to select 'all/none' checkboxes in a particular section vs all the checkboxes on the page.

How do I incorporate this into this attached JavaScript?

Thank you in advance mock up of checkbox form
<script type=text/javascript>
function checkAll(name, mainCheckBox)
{
                var checkBoxes = document.getElementsByTagName("input");

                for (var x = 0; x < checkBoxes.length; x++)
                {
                       var cBox = checkBoxes[x];
                       if (cBox.type == "checkbox")
                       {
                               if (cBox.id.indexOf(name) > -1)
                               {
                                     cBox.checked = mainCheckBox.checked;
                               }
                       }
                }
}

</script>

Open in new window

0
justmelat
Asked:
justmelat
  • 7
  • 6
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
right click on the page in your browser, choose view source and post it here
0
 
justmelatAuthor Commented:
Hi leakim971:

a portion of the code is attached.  It's company code so obviously I can't display everything.  Do a search for displayatlist and displayatcopyrequest and you will see how the id hold the value of the fieldset.

this is an auto generating form that the clients use, so they can create as many fieldsets and/or checkboxes as they want.
<tr>

			       <td valign="top">

					    <fieldset><legend class='sectiontitle'><input id="section-title-11" name="section-title-11" maxlength="120" size="40" class="sectiontitle" value="Project Overview" ></legend><div align="right" style="padding-right:10px"><a style="cursor:pointer" onclick="openPopupWindow('formdesign/reorder/sectionfield/11', 620, 400)" class="linktext"> Reorder Fields </a><span class="valuetext">|</span><a style="cursor:pointer" onclick="deleteSection(11, 'deletesection')" class="linktext"> Delete Section </a></div><table id="tableSection-11" width='98%' border='0' cellpadding='2' cellspacing='2'><tr height="20"><td width="8%" align="center" class="labeltext" bgcolor="#C0C0C0">Display In List?</td><td width="10%" align="center" class="labeltext" bgcolor="#C0C0C0">Display In "Copy Request" Filter?</td><td width="15%" align="center" class="labeltext" bgcolor="#C0C0C0">Field Name/Label</td><td width="15%" align="center" class="labeltext" bgcolor="#C0C0C0">Field Type</td><td width="7%" align="center" class="labeltext" bgcolor="#C0C0C0">Required?</td><td width="20%" nowrap align="center" class="labeltext" bgcolor="#C0C0C0">Map to RoboHead Field?</td><td width="2%" nowrap align="center" class="labeltext" bgcolor="#C0C0C0">Help</td><td width="3%" bgcolor="#C0C0C0">&nbsp;</td></tr><tr bgcolor='#ffffff'><td align="center" class="valuetext"><div id='td-11-15-displayatlist'><table cellpadding='0' cellspacing='0'><tr><td class="valuetext" ><input type="checkbox" name="11-15-displayatlist" id="11-15-displayatlist" value="1"checked></td></tr></table></div></td><td align="center" class="valuetext"><div id='td-11-15-displayatcopyrequest'><table cellpadding='0' cellspacing='0'><tr><td class="valuetext" ><input type="checkbox" name="11-15-displayatcopyrequest" id="11-15-displayatcopyrequest" value="1"></td></tr></table></div></td><td  class="valuetext" align="center"><input id="11-15-name" name="11-15-name" maxlength="120" size="30" class="valuetext" value="Project Requested By" ></td><td class="valuetext" align="center">
<select id="15-type" name="15-type" class="valuetext"   onchange="showHideSetOptionsLink(this.value, 15)">

Open in new window

0
 
leakim971PluritechnicianCommented:
sorry I can't play with the provided sample, I would like the html from your screen copy in your main post
it would be good to have the css too
thanks
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tom BeckCommented:
I must be missing something.

Here's an overly simplified version of your situation. The first row is the "check all/none" row. As long as the ids are filled in as you described, the code you provided with your question works perfectly.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td><input type="checkbox" onclick="checkAll('displayatcopyrequest', this);" /></td>
        <td><input type="checkbox" onclick="checkAll('displayatlist', this);" /></td>
        <td><input type="checkbox" onclick="checkAll('required', this);" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="52-200-displayatcopyrequest" /></td>
        <td><input type="checkbox" id="52-200-displayatlist" /></td>
        <td><input type="checkbox" id="52-200-required" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="12-156-displayatcopyrequest" /></td>
        <td><input type="checkbox" id="12-156-displayatlist" /></td>
        <td><input type="checkbox" id="12-156-required" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="??-???-displayatcopyrequest" /></td>
        <td><input type="checkbox" id="??-???-displayatlist" /></td>
        <td><input type="checkbox" id="??-???-required" /></td>
    </tr>
</table>
0
 
justmelatAuthor Commented:
hi tommyboy

The problem is, this is a dynamic form, so there could be 2 sections/fieldsets, 20 sections/fieldsryd, 10, etc

Take a look at the mockup above.  I want to check the master checkbox uner 'Display in copy request filter' and ONLY the three checkboxes in that section/fieldset be checked/unchecked.

or if I check the master checkbox uner 'Display in List' in the VCom fieldset, then only the checkboxes in that fieldset for that column are checked/unchecked

What happens now with the code I have, it will select the checkboxes in that column for Project Details and Vcom and any other fieldsets I have on the form that are called displayatcopyrequest

so I want this code to say check/uncheck all boxes, based on the fieldset I am in and it's associated
checkboxes, not every checkbox on the page that has a similiar id name.

Does that help?
0
 
Tom BeckCommented:
Ok, so add another identifier that isolates each fieldset and include another conditional to your script.

For example, ids for VCom fieldset will be

id="VC-12-156-displayatcopyrequest"
id="VC-12-156-displayatlist"
id="VC-12-156-required"

ids for Product Details

id="PD-52-200-displayatcopyrequest"
id="PD-52-200-displayatlist"
id="PD-52-200-required"

Then test for that identifier as well.

In markup for Product Details section, displayatcopyrequest for example write: onclick="checkAll('PD', 'displayatcopyrequest', this);

In javascript:

function checkAll(fieldset, name, mainCheckBox)
{
 ....
 ....
              if (cBox.id.indexOf(name) > -1)
             {
                  if(cBox.id.indexOf(fieldset)> -1)
                  {
                      cBox.checked = mainCheckBox.checked;
                  }                  
                   
              }
0
 
justmelatAuthor Commented:
Ok let me try that

I already set up the other identifier that is attached to each checkbox within a section [12 as in the example below], let me me work with your code above.

the 'id' for the Vcom fieldset is 12, the checkboxes in that section are
 id="12-156-displayatcopyrequest"
id="12-156-displayatlist"
id="12-156-required"

and so on....
0
 
Tom BeckCommented:
Using the "12" in your example will work as the fieldset id as long as the "12" will never occur in any other fieldset id. If you have another fieldset where the ids are "23-312-required" for example, the "12" will be picked up in the javascript and the checkbox will be checked (or unchecked) as if it belonged to the VCom fieldset even though it does not.
0
 
justmelatAuthor Commented:
Hi Tommyboy

That worked (genius), but here is another issue, when I click to save the request button at the bottom of the page, the updated values for the checkboxes are not saved to the db.  

So, for example, if I check the master required box, that then checks all the required checkboxes in that column for that section and click the save button, all the values in the checkboxes are erased. so it empties all the values in the checkboxes.  See the images, in order, that I have attached.
checkAll-beforeSaving.png
checkAll-afterSaving.png
0
 
Tom BeckCommented:
If you are already set up to process post data, you could add hidden fields to your markup for each fieldset mainCheckBox.

<input type="hidden" id="12-156-required_HF" value="false,false,false" />

Initialize the hidden field value to "false,false,false", assuming the fieldset contains three columns with check all/none checkboxes.

The new function call from the onclick of the mainCheckBox would be for example:

onclick="checkAll('12-156', 'required', this.checked, true)  <!--true means set the hidden field values-->

Then, each time the checkAll script is run, update the hidden field with the new values (true or false) of the mainCheckBox for each column in the fieldset. Then restore the mainCheckBox state on page reload.

So in your javascript add something like this (untested code):

function setHiddenField(fieldset, name, value)
{    
    var hiddenFieldId = fieldset + "-" + name + "_HF";   //this should yield, for example, 12-156-required_HF as the  hidden field id
    var hiddenField = document.getElementById(hiddenFieldId).value;
    var hfValues = hiddenField.split(",");
    switch (name)
    {
         case: "displayatlist":
              hfValues[0] = value;
              break;
         case: "displayatcopyrequest":
              hfValues[1] = value;
              break;
         case: "required":
              hfValues[3] = value;    //be sure to get the indexes correct
    }
     //get the new values back into the hidden field. This could be a for loop if there are many columns.
    hiddenField = hfValues[0] + "," + hfValues[1] + "," + hfValues[2];
}

function checkAll(fieldset, name, checkedValue, setHF)
{
     if (setHF)      //only set the hidden field values if user clicks a mainCheckBox, not for restore after postback.
     {
          setHiddenField(fieldset, name, checkedValue)
     }
 ....
 ....
              if (cBox.id.indexOf(name) > -1)
             {
                  if(cBox.id.indexOf(fieldset)> -1)
                  {
                      cBox.checked = checkedValue;                      
                  }                  
                   
              }

Then on each page load, re-set the values of the mainCheckBoxes by looping through the hidden field values, splitting the strings each time, and repeatedly calling checkAll(fieldset, name, checkedValue, false).
0
 
Tom BeckCommented:
Two corrections.

You wouldn't want the column name in the hidden field id for a fieldset, so:

<input type="hidden" id="12-156-required_HF" value="false,false,false" />

Should be:

<input type="hidden" id="12-156_HF" value="false,false,false" />

And this line in my setHiddenField function:

var hiddenFieldId = fieldset + "-" + name + "_HF";   //this should yield, for example, 12-156-required_HF as the  hidden field id

Should be:

var hiddenFieldId = fieldset  + "_HF";   //this should yield, for example, 12-156_HF as the  hidden field id
0
 
justmelatAuthor Commented:
HI tommyBoy:

I may try your code, but I think I may have found the issue.  this is a pretty massive app written in codeIgniter, which I am not an expert in yet, but I think because I added the section id to the check-box field names/ids, it now doesn't know what it suppose to save.  So for example, instead of having 156-displayatlist to add to the db, which is how it was originally set up, it now has 12-156-displayatlist and it is not recognizing that '12' for the field-set identifier.

Also I think you have more than answered my original problem, so I am going to just award you the points.  If I get stuck, I'll ask this second part of this issue in another question.

Thank you so much!!! I would never have figured this out.
0
 
justmelatAuthor Commented:
HI tommyBoy:

That was the exactly problem and somehow your reference to the hidden field option made it stand out to me.  Thanks so mcuh again !!!!!
0
 
justmelatAuthor Commented:
Superb, superb, superb.
0
 
Tom BeckCommented:
Your're welcome, thanks for the points. Glad it worked out.
0

Featured Post

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.

  • 7
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now