Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Urgent- Screwed up in previous post and need big-time help with organizing data in popup.

Posted on 2004-04-23
6
Medium Priority
?
220 Views
Last Modified: 2008-03-04
I posted this last week and got a really great solution from lilPuffball.  But, I screwed up in making the example I posted too nice and need - sequential numbers, everything in order and such.  However the real application has no such niceties to work with. All the names and values are as they are in the real application.  So here goes the explanation...

This is an part of a much larger application.  In this piece, the user can select a group of items or individual items and these selections, when submitted, are then used in a number of database queries in other parts of the site.  The current functionality only has the selections being gathered, sorted and then posted back to the parent page.

The additional functionality I'm needing is:
1 - When a group is selected, all the indivual parts of the group are selected too.  Conversely, if all the pieces of a group are individually selected, the group needs to be checked when all the elements of that group have been checked.

When the popup is closed:
1 - All distinct values need to be counted and passed back to the parent
2- A count of the selected groups need to be passed to the parent on submission.
3 - When submitted, if any groups are selected, those names need to be passed back to the parent as well.

For the cherry on top - this is the most important part of all
Once values have been passed to the parent, if the popup is launched again, the popup need to have all the groups and individual boxes selected that were previously passed.

I know this is huge but I'm SOL on getting this to work on my own.  I wish I could offer more than point - heck I wish I could offer more than 500 points.  I hope someone can take this on as I really need some assistance on this!

Code is below - thanks very, very much for any help!


test.asp
-------------------------------------------------------------------------
<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function popUp(url, myname, w, h, scroll,resize) {
      
var winl = (screen.width - w) / 2;
var wint = ((screen.height - h) / 2)-20;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',toolbar=0, status=0, resizable='+resize+',menubar=0';
win = window.open(url, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
//-->
</SCRIPT>
</head>
<body>
<a href="breadPop.asp" onClick="popUp(this.href,'test','300','400','yes','yes');return false;">Select Parameters</a>
<br>
<form method="post" action="" name="form1" id="form1">
<table>
<tr>
<td>Checked Values</td>
<td><input type="text" name="strChecked" value="" size="30"></td>
</tr>
<tr>
<td>Total # Items Checked</td>
<td><input type="text" name="strNumChecked" value="" size="30"></td>
</tr>
<tr>
<td># of Groups Selected</td>
<td><input type=text name=numGroups size=30></td>
</tr>
<tr>
<td>Groups Selected</td>
<td><input type=text name=groups size=30></td>
</tr>
</table>
</form>
</body>
</html>



testPop.asp
-------------------------------------------------------------------------
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function populate()
{
var arrValue=[];
var objForm = document.form2;
for(i=0;i<objForm.elements.length;i++)
{
if(objForm.elements[i].type=="checkbox" && objForm.elements[i].checked)
{
if(objForm.elements[i].value.indexOf(",")!=-1)
{
var tempArr=objForm.elements[i].value.split(",");
for(var j=0;j<tempArr.length;j++)
{
arrValue[arrValue.length] =tempArr[j];
}
}
else
{
arrValue[arrValue.length] =objForm.elements[i].value;
}
}
}
window.opener.document.form1.strChecked.value = (rmd(arrValue.sort(cmpnmbr))).join(",");
window.close();
}
function cmpnmbr(a, b)
{
if(a*1<b*1) return -1;
if(a*1>b*1) return 1;
return 0;
}
function rmd(arr)
{
for(var i=arr.length;i>0;i--)
{
for(var j=i-1;j>-1;j--)
{
if(arr[j]==arr[i])
{
arr.splice(i,1);
break;
}
}
}
return arr;
}

function fillForm()
{
var lastVal=window.opener.document.form1.strChecked.value;
if(lastVal.indexOf("1,2,3,4,5")!=-1)document.form2.First5.checked=true;
if(lastVal.indexOf("6,7,8,9,10")!=-1)document.form2.Second5.checked=true;
if(lastVal.indexOf("11,12,13,14,15")!=-1)document.form2.Third5.checked=true;
var arrChecked = lastVal.split(",");
//alert (arrChecked);
var objFillForm = document.form2;
for(i=0;i<arrChecked.length;i++)
{
//alert(objFillForm.elements["chk_"+arrChecked[i]])
if(objFillForm.elements["chk_"+arrChecked[i]])
{
objFillForm.elements["chk_"+arrChecked[i]].checked=true;
}
}    
}
function group(obj)
{
var grArr=["Top5","Second5","Third5"];
var valArr=obj.value.split(",")
var theForm=obj.form;
for(var i=0;i<grArr.length;i++)
{
//if(grArr[i]!=obj.name)theForm.elements[grArr[i]].checked=false
}
for(var i=0;i<theForm.elements.length;i++)
{
for(var j=0;j<valArr.length;j++)
{
if(theForm.elements[i].name=="chk_"+valArr[j])
{
theForm.elements[i].checked=obj.checked;
j=valArr.length;
}
// else if(theForm.elements[i].name.indexOf("chk_")!=-1)
// {
//      theForm.elements[i].checked=false;
// }
}
}

}
//-->
</SCRIPT>

<title></title>
</head>
<body onLoad="fillForm();">
<form method="post" action="" name="form2" id="form2">
<table cellspacing="0">
<tr>
<td><input type="checkbox" name="First5" value="00300,00631,00671,31616,32211" onClick=group(this);></td>
<td>Bread</td>
</tr>
<tr>
<td><input type="checkbox" name="Second5" value="00055,00060,00061,01351,72053"  onClick=group(this)></td>
<td>Cheese</td>
</tr>
<tr>
<td><input type="checkbox" name="Third5" value="00625,00631,00665,00671,70507" onClick=group(this)></td>
<td>Fruit</td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td><input type="checkbox" name="00300" value="00300" onClick="form2.First5.checked=false;"/></td>
<td>Bread 1</td>
</tr>
<tr>
<td><input type="checkbox" name="00631" value="00631"  onClick="form2.First5.checked=false;"/></td>
<td>Bread 2</td>
</tr>
<tr>
<td><input type="checkbox" name="00671" value="00671"  onClick="form2.First5.checked=false;"/></td>
<td>Bread 3</td>
</tr>
<tr>
<td><input type="checkbox" name="31616" value="31616"  onClick="form2.First5.checked=false;"/></td>
<td>Bread 4</td>
</tr>
<tr>
<td><input type="checkbox" name="32211" value="32211"  onClick="form2.First5.checked=false;"/></td>
<td>Bread 5</td>
</tr>
<tr>
<td><input type="checkbox" name="00055" value="00055"  onClick="form2.Second5.checked=false;"/></td>
<td>Cheese 6</td>
</tr>
<tr>
<td><input type="checkbox" name="00060" value="00060" onClick="form2.Second5.checked=false;"/></td>
<td>Cheese 7</td>
</tr>
<tr>
<td><input type="checkbox" name="00061" value="00061" onClick="form2.Second5.checked=false;"/></td>
<td>Cheese 8</td>
</tr>
<tr>
<td><input type="checkbox" name="01351" value="01351" onClick="form2.Second5.checked=false;"/></td>
<td>Cheese 9</td>
</tr>
<tr>
<td><input type="checkbox" name="72053" value="72053" onClick="form2.Second5.checked=false;"/></td>
<td>Cheese 10</td>
</tr>
<tr>
<td><input type="checkbox" name="00625" value="00625" onClick="form2.Third5.checked=false;"/></td>
<td>Fruit 11</td>
</tr>
<tr>
<td><input type="checkbox" name="00631" value="00631" onClick="form2.Third5.checked=false;"/></td>
<td>Fruit 12</td>
</tr>
<tr>
<td><input type="checkbox" name="00665" value="00665" onClick="form2.Third5.checked=false;"/></td>
<td>Fruit 13</td>
</tr>
<tr>
<td><input type="checkbox" name="00671" value="00671" onClick="form2.Third5.checked=false;"/></td>
<td>Fruit 14</td>
</tr>
<tr>
<td><input type="checkbox" name="70507" value="70507" onClick="form2.Third5.checked=false;"/></td>
<td>Fruit 15</td>
</tr>
<tr>
<td colspan="2"><br><INPUT type="button" value="Submit" id="button1" name="button1" onClick="populate();" /></td>
</tr>
</table>
</form>
</body>
</html>
0
Comment
Question by:saabStory
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 7

Accepted Solution

by:
mark-b earned 2000 total points
ID: 10902857
For your testPop.asp file:

<html>
<head>
  <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  <!--
  function populate() {
      var objForm = document.form2;
      var groupArr = [];
      var strArr = [];
      var pForm = window.opener.document.form1;

      pForm.strChecked.value = '';
      pForm.strNumChecked.value = '';
      pForm.groups.value = '';
      pForm.numGroups.value = '';

      var val,el;

      for (i=0;i<objForm.elements.length;i++) {
          if (objForm.elements[i].type=="checkbox" && objForm.elements[i].checked) {
              el =  objForm.elements[i];
              val = el.value;

              if ( val.indexOf(",")!=-1) {
                  groupArr.length++;
                  groupArr[groupArr.length-1] = el.name;
              } else {
                  strArr.length++;
                  strArr[strArr.length-1] = val;
              }
          }

      }

      pForm.strChecked.value = strArr.sort().join(",");
      pForm.strNumChecked.value = strArr.length;
      pForm.groups.value = groupArr.sort().join(",");
      pForm.numGroups.value = groupArr.length;

      window.close();
  }
 
  function fillForm() {
      var pForm = window.opener.document.form1;
      var objForm = document.form2;

      var arr = [ pForm.strChecked.value, pForm.groups.value ];
      var el;

      for (i=0;i<arr.length;i++) {
          var arrChecked = arr[i].split(",");

          for ( j = 0; j < arrChecked.length; j++ ) {
              el = getCbxElement( objForm, arrChecked[j] );
              if ( el ) el.checked=true;;
          }
      }
  }
  function group(obj)
  {
      var valArr=obj.value.split(",")
      var theForm=obj.form;
      var other;
      for (var i=0;i<valArr.length;i++) {
          other = getCbxElement( theForm, valArr[i] );

          if ( other ) {
              other.checked=obj.checked;
          }
      }
     
  }
  function getCbxElement( theForm, name ) {
      for (var i=0;i<theForm.elements.length;i++) {
          if ( theForm.elements[i].type=="checkbox" && theForm.elements[i].name==name ) {
              return theForm.elements[i];
          }
      }
  }
  //-->
  </SCRIPT>

  <title></title>
</head>
<body onLoad="fillForm();">
<form method="post" action="" name="form2" id="form2">
  <table cellspacing="0">
    <tr>
      <td>
        <input type="checkbox" name="First5" value="00300,00631,00671,31616,32211" onClick=group(this);>
      </td>
      <td>Bread</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="Second5" value="00055,00060,00061,01351,72053" onClick=group(this)>
      </td>
      <td>Cheese</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="Third5" value="00625,00631,00665,00671,70507" onClick=group(this)>
      </td>
      <td>Fruit</td>
    </tr>
    <tr>
      <td colspan="2">
        <hr>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00300" value="00300"/>
      </td>
      <td>Bread 1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00631" value="00631"/>
      </td>
      <td>Bread 2</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00671" value="00671"/>
      </td>
      <td>Bread 3</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="31616" value="31616"/>
      </td>
      <td>Bread 4</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="32211" value="32211"/>
      </td>
      <td>Bread 5</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00055" value="00055"/>
      </td>
      <td>Cheese 6</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00060" value="00060"/>
      </td>
      <td>Cheese 7</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00061" value="00061"/>
      </td>
      <td>Cheese 8</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="01351" value="01351"/>
      </td>
      <td>Cheese 9</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="72053" value="72053"/>
      </td>
      <td>Cheese 10</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00625" value="00625"/>
      </td>
      <td>Fruit 11</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00631" value="00631"/>
      </td>
      <td>Fruit 12</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00665" value="00665"/>
      </td>
      <td>Fruit 13</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="00671" value="00671"/>
      </td>
      <td>Fruit 14</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="70507" value="70507"/>
      </td>
      <td>Fruit 15</td>
    </tr>
    <tr>
      <td colspan="2"><br>
        <INPUT type="button" value="Submit" id="button1" name="button1" onClick="populate();" />
      </td>
    </tr>
  </table>
</form>
</body>
</html>
0
 

Author Comment

by:saabStory
ID: 10902928
Wow - this looks about 99.9% perfect.  Is there a way to make it so that if you check all the checkboxes of a group, it also checks the group?
0
 
LVL 7

Expert Comment

by:mark-b
ID: 10902948
By the way,  Bread 2 has the same name as Fruit 12 and Bread 3 has the same name as Fruit 14.. Which is why you see some weird behavior when you check the 'Fruit' group.  I'm assuming that this is just a typo of yours.  If they had unique names it would work fine.

-Mark
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

Author Comment

by:saabStory
ID: 10902991
YOU ARE A GOD!!!!!!   Please disregard - previous message - we dont' need it like I thought.  You saved me from working this weekend and so much else.  I can't thank you enough!!!!!
0
 

Author Comment

by:saabStory
ID: 10903007
I'd give you a hundred A's for this one if I could - it's the close of a long 6 month project that's being shipped out to the client on Monday.  I'll be sure to include you and all the other EE folks in my documentation we're handing over......
0
 
LVL 7

Expert Comment

by:mark-b
ID: 10903062
Thanks.  Glad I could help!

-Mark
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

715 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