Solved

Facebook + Javascript + Hide - Show field Toggle = Headache

Posted on 2010-09-04
9
592 Views
Last Modified: 2012-06-27
Hello all,

i would like to show or hide a text field on a form in html in a facebook app when I click a checkbox.  I know the code to set whether a checkbox is true/false is as follows and I was hoping there would be something similarly simple to hide or show a textbox:

    document.getElementById('CheckAnswerA').setChecked(false);

Any help you can offer would be greatly appreciated. Many thanks, Colin.

0
Comment
Question by:Canders_12
  • 3
  • 3
  • 3
9 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33603124
From here : http://developers.facebook.com/docs/fbjs#dom_objects

I see we may use setStyle :


document.getElementById("texboxID").setStyle("display", "none");

Open in new window

0
 
LVL 2

Expert Comment

by:filosof
ID: 33603285
You need something like in the attached code snippet.

Additional notes:
In some cases maybe it makes sense to disable/enable the textarea as well - to suppress any input from sending to server etc..
...
<div>
<input type="checkbox"
 onclick="document.getElementById('mytext').style.display=(this.checked)?'':'none'">
</div>
...
<div>
<textarea id="mytext" style="display: none;"></textarea>
</div>
...

Open in new window

0
 

Author Comment

by:Canders_12
ID: 33603921
excellent :)

is it easy just to do the reverse and show the textfield?

many thanks, Colin.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 82

Expert Comment

by:leakim971
ID: 33603937
to show use block instead none

0
 
LVL 2

Expert Comment

by:filosof
ID: 33606778
leakim971
No, using "block" is not correct for all cases - better to use empty string ("") !

why:
1. "" will also show the text field
2. sometimes you need another value instead of "block" - that is specified by CSS classes of element etc.. - "bock" will override this feature, "" - not

Canders_12
my example does both: hides and shows


....style.display = (this.checked) ? '' : 'none';
or
....style.display = (this.checked) ? 'none' : '';

Open in new window

0
 

Author Closing Comment

by:Canders_12
ID: 33607213
Beautiful :)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33607707
Thanks for the points!
0
 

Author Comment

by:Canders_12
ID: 33612979
filosof,

sorry, you definitely deserve points here :(

is it against rules to pop up the same question to ensure you also get some points? sorry, i was rushing and didnt read everyones post.  Sorry dude.
0
 
LVL 2

Expert Comment

by:filosof
ID: 33614719
I do not know how to adjust - just ask some moderator etc.  - no matter
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

791 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