Solved

hide a html table IF form text box value is null

Posted on 2010-11-10
22
309 Views
Last Modified: 2012-05-10
please see the attached screen shot.  what i have is a dynamic site which pulls values into a text box.  it's integrated with opentext livelink web forms 9.7.2, which doesn't matter, we can generalize everything.

if a null value is detected within the PERSON text box, then i'd like the whole table hidden from view when the user clicks 'Remove Empty Fields'.

i've highlighted tables in orange on the screenshot.  i didn't highlight them all, but you get the idea.

the website loads and content will automatically populate the text boxes (just not all text boxes)
the website will have a button that the user clicks
this button will wipe all tables when a null value is detected within the PERSON text box

once wiped, the user has a nice clean form they can print > this form is used to approve high dollar projects.

so i have 13 tables which each contain a PERSON text box:

Reviewer1Table (text box _1_1_22_1_Name)
Reviewer2Table (text box _1_1_25_1_Name)
Reviewer3Table (text box _1_1_28_1_Name)
Reviewer4Table (text box _1_1_31_1_Name)
Reviewer5Table (text box _1_1_34_1_Name)
Manager1Table (text box _1_1_12_1_Name)
Manager2Table (text box _1_1_16_1_Name)
TechAssuranceTable (text box _1_1_20_1_Name)

etc. etc. etc

the logic i'm thinking when the button is pressed:

IF _1_1_22_1_Name = null THEN hide Reviewer1Table

i need this function to scan all 13 text boxes

i already have a submit button with a doSubmit function - i can't conflict the two buttons, right?
11-10-2010-12-29-00-PM.png
0
Comment
Question by:sknoll84
  • 12
  • 10
22 Comments
 
LVL 9

Accepted Solution

by:
CCSOFlag earned 500 total points
Comment Utility
try this:

function to put in your button tag:
onclick="RemoveEmptyFields();"


javascript:

function HideNullParentTable(myID)
{
  myElement = document.getElementById(myID);
  if (!myElement.value)
  {
    myParent = myElement.parentNode;
    while(myParent.nodeName!='table')
    {
      myParent = myParent.parentNode;
    }
    myParent.style.display = 'none';
  }
}

function RemoveEmptyFields()
{
  HideNullParentTable('_1_1_22_1_Name');
  HideNullParentTable('_1_1_25_1_Name');
  ... //need to do it for each one, I don't see a way to automatically cycle through these tags.
}
0
 

Author Comment

by:sknoll84
Comment Utility
do i replace HideNullParentTable with my table name?
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
no that's a javascript funtion you ar ecalling.  the table is found my using the parentNode call of the text box id you have passed.
0
 

Author Comment

by:sknoll84
Comment Utility
so because the text box exists within a table, the table it exists within is called the parentnode?
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
it is eventually a parent node.  the first parent node would be the td, then tr, then table.  It cycles through until it finds the first parent table node.  
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
I'm heading out of the office in a bit and I have tomorrow off.  If I get time at home I'll respond, but no promises.  Sorry...
0
 

Author Comment

by:sknoll84
Comment Utility
okay this is my javascript:


<script type="text/javascript" language="javascript">
function HideNullParentTable(myID)
{
 myElement = document.getElementById(myID);
 if (!myElement.value)
 {
   myParent = myElement.parentNode;
   while(myParent.nodeName!='table')
   {
     myParent = myParent.parentNode;
   }
   myParent.style.display = 'none';
 }
}

function RemoveEmptyFields()
{
 HideNullParentTable('_1_1_22_1_Name');
 HideNullParentTable('_1_1_25_1_Name');
 HideNullParentTable('_1_1_28_1_Name');
 HideNullParentTable('_1_1_31_1_Name');
 HideNullParentTable('_1_1_34_1_Name');
 HideNullParentTable('_1_1_12_1_Name');
 HideNullParentTable('_1_1_16_1_Name');
 HideNullParentTable('_1_1_20_1_Name');
 HideNullParentTable('_1_1_37_1_Name');
 HideNullParentTable('_1_1_42_1_Name');
 HideNullParentTable('_1_1_46_1_Name');
 HideNullParentTable('_1_1_50_1_Name');
 HideNullParentTable('_1_1_54_1_Name');
}
</script>


this is my button:

<input name="RemoveApprovers" type="button" value="Remove Extra Approvers" onclick="RemoveEmptyFields();">


no success.  any ideas?
0
 

Author Comment

by:sknoll84
Comment Utility
here is a table that i'd like to hide > it contains text box _1_1_28_1_Name
i'm providing this so you get an idea of what's contained within the table i'd like to hide



<table id="Reviewer3Table"  style=""  width="700" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="170" class="style2"><div align="left"> Reviewer</div></td>
    <td width="300" class="style2"><div align="left"><SCRIPT LANGUAGE="JavaScript">
function chooseUser_1_1_28_1()
{
var            url;
var            w;
url = '/livelink/livelink.exe?func=user.SelectUserDlg&formname=myForm&fieldprefix=_1_1_28_1&title=Select%20User&DisplayUserName&NoGroups=FALSE';
url = url + '&NoGroupsSelectable=TRUE'
w = window.open(url,"","height=340,width=680,scrollbars=yes,resizable=yes,menubar=no,toolbar=yes,status=yes");
if ( w.focus )
{
w.focus();
}
}
function KeepFieldSet_1_1_28_1( nameField, savedValue )
{
if ( nameField.value != '' )
{
alert( "You can't enter text in by hand. Use the link to the right." );
nameField.value = savedValue;
}
else if ( markDirty != null )
{
markDirty();
}
if ( nameField.value == savedValue.value )
{
savedValue.value = nameField.value;
}
}
</SCRIPT>
<INPUT TYPE="HIDDEN" NAME="_1_1_28_1_ID" VALUE="[LL_FormTag_1_1_28_1 /]">
<INPUT TYPE="HIDDEN" NAME="_1_1_28_1_SavedName" VALUE="[LL_FormTag_1_1_28_1_SavedName /]">
<LABEL FOR="_1_1_28_1_Name"></LABEL>
<INPUT CLASS="valueEditable" TYPE="TEXT" NAME="_1_1_28_1_Name" ID="_1_1_28_1_Name" VALUE="[LL_FormTag_1_1_28_1_SavedName /]" ALT="Select User" SIZE="23" ONCHANGE="KeepFieldSet_1_1_28_1( this, this.form._1_1_28_1_SavedName.value )">
<IMG SRC="/img/guy_select.gif" ALT="Select User" BORDER="0"></div>
    </td>
    <td width="100" class="style2"><div align="left">
      <SELECT CLASS="selectMenu" disabled ID="_1_1_99_1" NAME="_1_1_99_1" ONCHANGE="markDirty();">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="Approve" >Approve</OPTION>
<OPTION VALUE="Reject" >Reject</OPTION>
</SELECT>
    </div></td>
    <td width="130" class="style2"><div align="left"><INPUT CLASS="valueEditable" DISABLED="disabled" TYPE="text" NAME="_1_1_89_1" TITLE="Reviewer 3 Date" ID="_1_1_89_1" VALUE="[LL_FormTag_1_1_89_1 /]" SIZE="11" MAXLENGTH="32" ONCHANGE="markDirty();"></div></td>
  </tr>
</table>
0
 

Author Comment

by:sknoll84
Comment Utility
just bumping the question here.....

IF _1_1_22_1_Name = null THEN hide Reviewer1Table
IF _1_1_25_1_Name = null THEN hide Reviewer2Table
IF _1_1_28_1_Name = null THEN hide Reviewer3Table
IF _1_1_31_1_Name = null THEN hide Reviewer4Table
IF _1_1_34_1_Name = null THEN hide Reviewer5Table
IF _1_1_12_1_Name = null THEN hide Manager1Table
IF _1_1_16_1_Name = null THEN hide Manager2Table


i need to find empty text boxes and hide the table which the text box exists
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
Hey, sorry about not being able to help out yesterday...

So is anything happening when you push the button?
0
 

Author Comment

by:sknoll84
Comment Utility
hey no worries, hope you enjoyed your day off!

nothing is happening when i push the button....

and in fact i would later like to talk about performing this function on page load - is that possible?

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
oops, sorry, change this line in the javascript:

while(myParent.nodeName!='TABLE')

javascript pulls the tag name as upper case.  :(  Sorry.
0
 

Author Comment

by:sknoll84
Comment Utility
w00t! w00t!
0
 

Author Comment

by:sknoll84
Comment Utility
you my friend are amazing.

so what if i wanted to do this onPageLoad?

think it would work?
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
yes, just add this to your body tag:

<body onload="RemoveEmptyFields()">
0
 

Author Comment

by:sknoll84
Comment Utility
hmm that doesnt seem to work:

<BODY Class="pageBody" onload="RemoveEmptyFields()">
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
really?  Hmmm.  OK try to put this at the bottom of your page inside your body section.

<script type="text/javascript">
RemoveEmptyFields()
</script>

</body>
0
 

Author Comment

by:sknoll84
Comment Utility
HAHAHAHA its working

okay, standby - i have to test within my environment


hey, where do you live?  you looking for an opportunity?
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
lol, opportunity for what?  I'm in Flagstaff, AZ...
0
 

Author Comment

by:sknoll84
Comment Utility
i work for a very successful consulting firm in dallas texas -  your skills are needed

we are looking for a developer

what about contract work, you do any?
0
 
LVL 9

Expert Comment

by:CCSOFlag
Comment Utility
Heh, definitely not interested in relocating to Dallas.  I have a full time job, but I might be willing to contract out some work if relocating isn't required.
0
 

Author Comment

by:sknoll84
Comment Utility
relocating would not be required - every now and then we have a project which calls for some minor development work - you seem perfect.  can you email me ?  i will not ask any technical questions - its strictly for any upcoming dev work that you may be interested in

stvnknoll [at] gmail

if i dont hear from ya, no hard feelings ;-)
ill quit hijacking this thread now.  off to test the solution in our qa environment
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now