Solved

hide a html table IF form text box value is null

Posted on 2010-11-10
22
313 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 500 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

710 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