Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide portion of my form

Status
Not open for further replies.
taree

taree

Technical User
May 31, 2008
316
US
Hi all,

I am trying to hide Portion of my form when the form loads using javascrip and for some reason it is not working. can someone help me how I can accomplish that. thank you all
 
Sort by date Sort by votes
I create a

function pwHide()
{
loginfrom.style.display = 'none';
}

and I try this in the body

<cody onload="return pwHide" > I am getting an error

please help me
 
Upvote 0 Downvote
Try this:


function pwHide()
{
[red]document.getElementById('[green]loginfrom[/green]')[/red].style.display = 'none';
}

<body onload="pwhide[red]();[/red]">
<form id="[green]loginform[/green]">
...
</form>


</body>


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thank you for your response.I tried it like this and still not working fom me. can take a look at my code please. the section id that i want to hide is "mainForm"

Here is my code:

Code: 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"><head[/URL] runat="server">
<script type="text/javascript">

function closeLoginForm ()
    {
	loginFormDiv.style.display = "none";
    }

function onLogin (id)
    {
    
    //Added this line and does not seem to do anything. this line should display the hidden section of the form
    document.getElementById(id).style.display = "block";
    
    
    
	loginFormDiv.style.display = "block";
    loginFormDiv.style.top = event.clientY - 10;

    if (loginFormDiv.style.pixelTop < 0)
        loginFormDiv.style.pixelTop = 0;
    else if (loginFormDiv.parentNode.offsetHeight < (loginFormDiv.style.pixelTop + loginFormDiv.style.pixelHeight))
        loginFormDiv.style.pixelTop = loginFormDiv.parentNode.offsetHeight - loginFormDiv.style.pixelHeight;

    loginFormDiv.style.left = event.clientX - 10;
    if (loginFormDiv.style.pixelLeft < 0)
        loginFormDiv.style.pixelLeft = 0;
    else if (loginFormDiv.parentNode.offsetWidth < (loginFormDiv.style.pixelLeft + loginFormDiv.style.pixelWidth))
        loginFormDiv.style.pixelLeft = loginFormDiv.parentNode.offsetWidth - loginFormDiv.style.pixelWidth;
    }

</script>

<title>Project</title>



<link href="css/08Styles_Blue.css" rel="stylesheet" type="text/css" />
<link href="css/08Styles.css" rel="stylesheet" type="text/css" />

<!--DO NOT REMOVE STYLE FOR: div#mainColumn ul-->
<style type="text/css">
div#mainColumn ul {
	margin-left: 8px;
	_margin-left: 20px;
}
body
    {
    background-color: #faffff;
    }

.partBody
    {
    border: solid 1px #808080;
    font: 8pt Verdana, Arial, sans-serif;
    }

.partLabel
    {
    border-bottom: solid 1px #808080;
    color: black;
    background-color: #fafaff;
    font: 8pt Verdana, Arial, sans-serif;
    font-weight: bold;
    }

.loginlabel
    {
    font-weight: bold;
    font-style:italic;
    }
div#mainForm {
	clear:none;
}
</style>
</head>
<body>
<a href="#main">
<img src="/images/jump.gif" alt="Jump to main content" border="0" id="jump" height="1" width="1"/></a>
<a name="top" id="top"></a>


<div id="topic_wrapper" >
  <div id="topicText" >
   	  <div id="topicShading" >
	  
    </div>

		<div class="topicSubhead" >&nbsp;</div>
        <h1 class="topicHead" >ProjectWise</h1>
	<div class="topicSubhead" >ProjectWise Web Interface</div>

  </div>
</div>
<!-- End topic_wrapper ___________________________ -->
<form runat="server">
        <table style="width: 100%" cellpadding="0" border="0" cellspacing="3">
            <tr>
                <td colspan="2" align="right">
                <span class="loginlabel">
                
                
               // WHAT DO I NEED TO DO HERE.
                             
                <a href="#" onClick="onLogin('mainForm'); return false;">Login/Logout</a></span>
                
                
                
            </td></tr>
        </table>
         <div id="loginFormDiv" style="display:inherit; position:fixed; middle: 10px; background-color: #9999CC;
            border: outset 2px white; width: 300px; padding: 3px; margin-left: 350px;">
            <ec:LoginForm ID="loginForm" runat="server" ConnectionId="default" />
            <div style="text-align: right"> 
            //Closed logon From
            <a href="#" onClick="closeLoginForm();return false;">Close</a></div>
        </div>


  <div id="mainForm" style="display:none">
        <table style="width: 100%" cellpadding="0" border="0" cellspacing="3">
            <tr>
                <td colspan="2" class="partLabel">
                    ProjectWise Search
                </td>
            </tr>
            <tr>
                <td colspan="2" class="partBody">
                    <pw:Search ID="search" ConnectionId="default" Title="Search" runat="server" Width="100%" />
                </td>
            </tr>
            <tr>
                <td class="partLabel">
                    ProjectWise Navigation
                </td>
                <td class="partLabel">
                    ProjectWise Content
                </td>
            </tr>
            <tr>
                <td rowspan="3" class="partBody" style="vertical-align: top; width: 25%">
                    <pw:Navigation ID="navigation" ConnectionId="default" Title="Navigation" Height="700px"
                        runat="server" />
                </td>
                <td class="partBody" style="vertical-align: top; width: 75%">
                    <pw:ContentControl ID="content" ConnectionId="default" Title="Content" Height="350px"
                        runat="server" />
                </td>
            </tr>
            <tr>
                <td class="partLabel">
                    ProjectWise Properties
                </td>
            </tr>
            <tr>
                <td class="partBody" style="vertical-align: top; width: 75%">
                    <pw:PropertiesControl ID="properties" ConnectionId="default" Title="Properties" Height="350px"
                        runat="server" />
                </td>
            </tr>
    </table>
</div>
</form>
<div id="footer_wrapper">

</div>

</body>
</html>
 
Upvote 0 Downvote
You're using the loginFormDiv variable and you're not defining it anywhere

Cheers,
Dian
 
Upvote 0 Downvote
thank yo Dian, How can I fix this. this code is written by consultant and I am not an expert in JavaScript. I really appreciate if you point me or show me how to fix this code.
 
Upvote 0 Downvote
Try this:

function closeLoginForm ()
{
[red]document.getElementByID('[green]loginFormDiv[/green]')[/red].style.display = "none";
}



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thank you vacunita for your response. everything seems to work ok but when I try to hid/show this section onclick event I see it is doing something but the section that was supposed to be appear does not show up.
I just want to hide and show the below section of the form. show on onLogin and hide during closeLoginForm.

Code: 
<div id="mainForm" style="display:none">
        <table style="width: 100%" cellpadding="0" border="0" cellspacing="3">
            <tr>
                <td colspan="2" class="partLabel">
                    ProjectWise Search
                </td>
            </tr>
            <tr>
                <td colspan="2" class="partBody">
                    <pw:Search ID="search" ConnectionId="default" Title="Search" runat="server" Width="100%" />
                </td>
            </tr>
            <tr>
                <td class="partLabel">
                    ProjectWise Navigation
                </td>
                <td class="partLabel">
                    ProjectWise Content
                </td>
            </tr>
            <tr>
                <td rowspan="3" class="partBody" style="vertical-align: top; width: 25%">
                    <pw:Navigation ID="navigation" ConnectionId="default" Title="Navigation" Height="700px"
                        runat="server" />
                </td>
                <td class="partBody" style="vertical-align: top; width: 75%">
                    <pw:ContentControl ID="content" ConnectionId="default" Title="Content" Height="350px"
                        runat="server" />
                </td>
            </tr>
            <tr>
                <td class="partLabel">
                    ProjectWise Properties
                </td>
            </tr>
            <tr>
                <td class="partBody" style="vertical-align: top; width: 75%">
                    <pw:PropertiesControl ID="properties" ConnectionId="default" Title="Properties" Height="350px"
                        runat="server" />
                </td>
            </tr>
    </table>
</div>
 
Upvote 0 Downvote
That section has an id of mainform correct? If that's what you want to hide or show then use that in your functions:
Code: 
function onLogin (id)
    {
    
    //Added this line and does not seem to do anything. this line should display the hidden section of the form
    document.getElementById('[red]mainForm[/red]').style.display = "block";

And this should hide it.
Code: 
function closeLoginForm ()
    {
document.getElementByID('[red]mainForm[/red]').style.display = "none";
    }


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

BobMe23
What new features have appeared in the latest versions of Java?
Replies
0
Views
27
BobMe23
BobMe23
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
743
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
367
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
335
malpa
malpa
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
263
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top