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

x
?
Solved

hide a html table IF form text box value is null

Posted on 2010-11-10
22
Medium Priority
?
315 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
[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
  • 12
  • 10
22 Comments
 
LVL 9

Accepted Solution

by:
CCSOFlag earned 2000 total points
ID: 34107334
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
ID: 34107388
do i replace HideNullParentTable with my table name?
0
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 34107403
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
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:sknoll84
ID: 34107527
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
ID: 34107635
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
ID: 34107665
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
ID: 34108057
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
ID: 34111908
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
ID: 34120682
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
ID: 34120776
Hey, sorry about not being able to help out yesterday...

So is anything happening when you push the button?
0
 

Author Comment

by:sknoll84
ID: 34120795
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
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 34120896
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
ID: 34120916
w00t! w00t!
0
 

Author Comment

by:sknoll84
ID: 34120922
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
ID: 34120926
yes, just add this to your body tag:

<body onload="RemoveEmptyFields()">
0
 

Author Comment

by:sknoll84
ID: 34120972
hmm that doesnt seem to work:

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

Expert Comment

by:CCSOFlag
ID: 34121062
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
ID: 34121270
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
ID: 34121277
lol, opportunity for what?  I'm in Flagstaff, AZ...
0
 

Author Comment

by:sknoll84
ID: 34121319
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
ID: 34121374
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
ID: 34121432
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

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

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

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…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

721 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