?
Solved

making a label invisible and visible

Posted on 2006-05-23
6
Medium Priority
?
788 Views
Last Modified: 2007-11-27
Hi,
On an ASP page (not ASP.net) how do i make a label invisible when the page loads the first time  & then I wan to make it visible after a button is pressed.

Thanks,

Chicho
0
Comment
Question by:chicho12
  • 3
  • 2
6 Comments
 
LVL 17

Expert Comment

by:BogoJoker
ID: 16746855
Hi chicho12,

Use CSS to give the section (<div> most likely) style="display: none;"
Then when a button is clicked, have javascript give that section (<div> most likely) style="display: block;"

Joe P
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16746906
You can associate label visibility with form field as shown below.



<script language="javascript">
function ShowHide (trgObj) {
       // Get a parent Node .. label
       if (!trgObj.parentNode) { return; }

       trgObj = trgObj.parentNode;      
       if (trgObj.style.display == 'none') {
       trgObj.style.display = 'inline';
       }
       else {
       trgObj.style.display = 'none';
       }
}</script>

<form>
<label for="txt1" display: none;">Label for Txt1
<input type="text" name="txt1" value="">
</label>
<input type="button" value="Show Txt1" onclick="ShowHide (this.form.txt1);">
</form>
0
 

Author Comment

by:chicho12
ID: 16751980
Thanks for your help.
I kind of mixed both of your answers & got the script to work.

I have one more question if any of you can answer it. If not, I will split the points betweeen you guys anyway.
The page is posting to itself so I see the label disappear for 1 second after i press the button but then the page reloads & i see it again.
I want the label to show only when I go to the page(like from a link to this page)  & I want it to dissapear once you press the button & reloads the page.

Thanks,
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16752121
Try this one, it submits to itself, will hide after postback.

Which method  you using "post" or "get" ?


<HTML>
<HEAD>
<TITLE>ShowHide Text Field</TITLE>
</HEAD>
<BODY>
<script language="javascript">
function ShowHide (trgObj) {
       // Get a parent Node .. label
       if (!trgObj.parentNode) { return; }

       trgObj = trgObj.parentNode;      
       if (trgObj.style.display == 'none') {
       trgObj.style.display = 'inline';
       }
       else {
       trgObj.style.display = 'none';
       }
}</script>

<form method="post">
<label for="txt1" style="display: none;">Label for Txt1
<input type="text" name="txt1" value="">
</label>
<input type="button" value="Show Txt1" onclick="ShowHide (this.form.txt1);">
<br><input type="submit" value="Submit the Form">
</form>
</BODY>
</HTML>  
0
 

Author Comment

by:chicho12
ID: 16752396
It kind of works, but the label is not displayed when i go to the page.
I would like the label to display when I go to the page & then dissapear when i hit the submit button.

its using post

Thanks,
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 1000 total points
ID: 16752617
It is matter changing the display status at the start ??

<form method="post">
<label for="txt1" style="display: inline;">Label for Txt1
<input type="text" name="txt1" value="">
</label>
<input type="button" value="Show Txt1" onclick="ShowHide (this.form.txt1);">
<br><input type="submit" value="Submit the Form">
</form>
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

809 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