SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide/Display Fields option in form

    Hello.
    My familiarity with JavaScript is that I can read it fairly well, but I can't write an original line of code. So I can take code that is generously donated, and *usually* tweak it enough to meet my needs.

    The code that I have is to hide optional fields on a form that is displayed twice in the program. One time that it is displayed it is in a modify mode where a database is read and fields are populated. The JavaScript works wonderfully in that call. The other time that the form is displayed, it's in an add mode for simple data entry and the JavaScript code doesn't work.

    The code to call the form is in a simple construct, in VBScript, and looks like this:
    Code:
    If btnSubmit = "Add" Then
    	Call Display_Add_Screen			
    ElseIf btnSubmit = "Modify" Then
    	Call Display_Modify_Screen
    
    Sub Display_Add_Screen
       <%Call Display_Recipe_Fields%>
    End Sub
    
    Sub Display_Modify_Screen
        <%Call Display_Recipe_Fields%>
    End Sub
    
    Display_Recipe_Fields
    <!-- p id="fm-intro" required for 'hide optional fields' function -->
    <p id="fm-intro">Fields in <strong>bold</strong> are required.</p> 
     
     	  
    <label for "Recipe_Description">Recipe Name:</label>
    <input name="Recipe_Description" id="Recipe_Description" type="text" size="50" maxlength="50" value ="<%Response.Write Recipe_Description%>" /  <br>
    
    <div class="fm-opt"> 
      <label for "Recipe_Source">Recipe Source:</label>
      <Input Type="Text" Class="myoptions" Size="30" Name="Recipe_Source" maxlength="30" value ="<%Response.Write Recipe_Source%>" />
      <br></div>
    This gives you the general idea that the Recipe_Fields is simply a called subroutine. The JavaScript works perfectly being called from Display_Modify_Screen.

    Here's my JavaScript
    Code:
    window.onload = function()
    {
    	
    
    if(document.getElementById)
    	{
    		
    		var linkContainer = document.getElementById('fm-intro');             
    		var linebreak = linkContainer.appendChild(document.createElement('br'));
    		var toggle = linkContainer.appendChild(document.createElement('a'));
    		toggle.href = '#';
    		toggle.appendChild(document.createTextNode(' Hide optional fields?'));
    		toggle.onclick = function()
    		{
    			var linkText = this.firstChild.nodeValue;
    			this.firstChild.nodeValue = (linkText == ' Hide optional fields?') ? ' Display optional fields?' : ' Hide optional fields?';
    			
    			var tmp = document.getElementsByTagName('div');
    			for (var i=0;i<tmp.length;i++)
    			{
    				if(tmp[i].className == 'fm-opt')
    				{
    					tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 'none';
    				}
    			}
    			return false;
    		}
             }
    
             
    }
    The difference between Add and Modify is that I'm giving focus to the first field in the Add area with a simple command
    Code:
    <%If fscreen = "Recipe Menu" and btnSubmit = "Add" Then%>
    	<body onload="document.forms.Page_Form1.Recipe_Description.focus();">
    and I think that is at the root of my problem. But, I don't know what to do to make the JavaScript work properly with this additional code. The JavaScript is in an external file is accessed with
    Code:
    <head>
    <title>Recipe Maintenance</title>
    <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
    <link rel="stylesheet" type="text/css" href="test.css"> 
    <script language="JavaScript" type="text/javascript" src="cssform.js"></script>
    
    </head>
    and the focus to the field is just the first code line in the body tag. I hope that I've given enough information (and that I haven't been too verbose) to allow someone to help me....

    much appreciated.

  2. #2
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Too much information to follow? I apologize....

    The basic question is this: is there a conflict in javascript when using a body onload and a window.onload function at the same time? The body onload is located, obviously, in the body and the window.onload function is an external file linked in the <head> section.

    If someone could answer this for me at least I'd know where to look to see why my code isn't working properly. TIA....

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The original post was a bit long and confused me

    body onload and a window.onload are the same so only one will be actioned

    onload="Function1();Function2();"

    will action both in sequence

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your response. I was afraid that I'd been confusing. In all the books I've read, I guess my question was just too darn basic to be answered and no author ever thought that someone would think the onload function would be two separate events for the body and the window. I thought that they were two separate events and was hoping that I could use other onload event handlers; i.e., form.onload and/or image.onload. Am I correct now in thinking that the onload event handler is just a one/shot, one/time occurrence of loading, basically, the page when a window is opened?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •