Solved

Classic 'hide a button' based on condition

Posted on 2006-11-08
11
469 Views
Last Modified: 2010-07-27
Hello,

I'm trying to hide a button based on a condition.  In simple terms I'm trying to do the following in javascript:

//If I am on tab2 which is <a href="#" rel="tcontent2">...showing contents of <DIV id="tcontent2">
IF GetCookie("ulid") = "tcontent2" THEN
//Hide this HTML button whose id and name is newbtn
document.newbtn.style.visibility = "hidden"
END IF

Button's tag which is not inside any form:
<BUTTON ID="newbtn" Name="newbtn">Hello</BUTTON>

Setting Cookie in js (this all works below):

function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}
function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}

=======================================
Basically trying to figure out the correct javascript syntax to hide my button when Cookie tells me user is viewing tab2 info.  Probably pretty simple, right?

THank you,
Jim
0
Comment
Question by:jayme9
  • 7
  • 4
11 Comments
 
LVL 6

Expert Comment

by:sodalitas
Comment Utility
Are you looking for this?

if (getCookie("ulid") == "tcontent2") {
     //Hide this HTML button whose id and name is newbtn
     document.newbtn.style.visibility = "hidden";
}
0
 
LVL 6

Expert Comment

by:sodalitas
Comment Utility
Sorry,

if (getCookie("ulid") == "tcontent2") {
     //Hide this HTML button whose id and name is newbtn
     document..getElementById("newbtn").style.visibility = "hidden";
}
0
 

Author Comment

by:jayme9
Comment Utility
That, unfortunately, did not work.  The button is still visible.
0
 
LVL 6

Expert Comment

by:sodalitas
Comment Utility
There was a syntax error in my javascript, it had document.. instead of document.
Fix that and try again, if still an issue, here is an alternative:

Put the button in a div tag like this

<div id="hideButton"><input type=button id="newBtn"></div>

if (getCookie("ulid") == "tcontent2") {
     //Hide this HTML button whose id and name is newbtn
     document.getElementById("hideButton").style.visibility = "hidden";
}
0
 

Author Comment

by:jayme9
Comment Utility
Sorry, there must be a problem in the code.

I tried your code above, still the button shows.

Even if I do this, the button still shows:

<script language="javascript">
{
     //Hide this HTML button whose id and name is newbtn
     document.getElementById("hideButton").style.visibility = "hidden";
}
</script>

inside my body HTML:
<div id="hideButton"><input type=button id="newBtn"></div>

Don't know how something so simple could turn out to be so complicated to do.

am I missing any prerequisites?  I figure if I can just hide the button using javascript that would be a start. Then I can figure out how to do it using a condition.

Hope to get more insight on how to make this possible.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 6

Expert Comment

by:sodalitas
Comment Utility
Is the javascript in the HEAD section?  The HEAD gets sent before the BODY, so if the script is in the HEAD and is not in a function, then it will attempt to run it right away and the div hasn't been loaded yet.  Try wrapping the code in a function like this in the HEAD:

function hideButton() {
  document.getElementById("hideButton").style.visibility = "hidden";
}

and put this script in the BODY just before the </body> tag,

<script lang=Javascript>
hideButton();
</script>

0
 
LVL 6

Expert Comment

by:sodalitas
Comment Utility
For example, this code works:

<html>
<head>
<script lang=Javascript>
function toggleHide() {
      if (document.getElementById("hideButton").style.visibility == "hidden")
           document.getElementById("hideButton").style.visibility = "";
      else
           document.getElementById("hideButton").style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="hideButton"><input type="button" id="hi" value="Hi" /></div>
<BR>
<input type="button" id="clickme" onclick="javascript:toggleHide();" value="Click Me" />
</body>
</html>
0
 

Author Comment

by:jayme9
Comment Utility
The problem was my tab which is a hyperlink calling the js function:

<a href="#" ref="tcontent2" onclick="javascript:toggleHide();">Tab 2</a>

the js would not execute unless I took out 'ref' from above.  I have no clue why.  However, I need 'ref' since it makes reference to a js file allowing user to maintain tab persistance using session cookies.

So I guess I'm back at square one?

I've been thinking of taking this approach since the cookie approach doesn't seem to be working:

When/if DIV id="tcontent2" is being viewed then hide button Xbutton:

in js (below seems logical approach, but does not work, why?):

if (document.getElementById("tcontent2").style.visibility <> "hidden") {
//only when user is viewing content in tab2 hide this button
document.getElementById("Xbutton").style.visibility = "hidden";
}

Note: Div id="tcontent2" is visible when user clicks the Tab 2 hyperlink:

      <ul id="maintab" class="shadetabs">
        <li class="selected"><a href="#" rel="tcontent1">Main</a>
        <li><a href="#" rel="tcontent2">Capabilities</a>
        <li><a href="#" rel="tcontent3">Remarks</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="NewOrgWin();" style="WIDTH: 117px; HEIGHT: 24px"><font color="navy" size="2"><b>Create
        New Unit</b></font></button>&nbsp;<button name="Button_Revise" onclick="OrgWin();" id="Button_Revise" style="HEIGHT: 24px" {hideme}><font size="2" color="navy"><b>Revise</b></font></button></li>
 
      </ul>

Thank you for your patience.
0
 
LVL 6

Expert Comment

by:sodalitas
Comment Utility
First thing that jumps out is a syntax problem, javascript uses != to mean not equal, not <>.
0
 

Author Comment

by:jayme9
Comment Utility
I found out that there is an onclick event for the hyperlink tag that is being declared inside the js file.  This was over-riding my own onclick event I placed to hide the button.  Now I have to figure out how to execute 2 js functions for one onclick event.  I tried just placing the functions one after the other, but that didn't work.  Then I removed the "if" condition and the button disappeared.  This is a good first step in the right direction.  Now I must try to implement the "if"condition somehow:

//works without the if condition.  Don't know what's wrong with the if condition since I tried various ways using != "hidden" and using double equal signs and the one below:
if (document.getElementById("tcontent2").style.visibility = "none") {
//only when user is viewing content in tab2 hide this button
document.getElementById("Xbutton").style.visibility = "none";
}

=================================
I'm one step closer then I was before.

0
 
LVL 6

Accepted Solution

by:
sodalitas earned 500 total points
Comment Utility
I would throw an alert line in just before the if condition to see what the value actually is:

alert(document.getElementById("tcontent2").style.visibility);

then when you test your different scenarios you will know what to check.

Also, you need to have double equal ==, if you only have one equal = it will assign it and return true if it was able to assign it, so in the if condition above you are not checking if the visibility = none, you are setting the visibility = none and then checking that that was successful.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

771 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

11 Experts available now in Live!

Get 1:1 Help Now