Changing two frames using submit button

phoenix69 · #1 09-Oct-2008, 13:17

Could someone help me with this? When I click on "Log in" after entering Password (12345) it change only "Main Page 1" to "Main Page 2" , I want to change "Column 1" to "Column 2" as well. What should I do? The following are just sample to take a look.
Thanks so much.
frames.htm

HTML Code:

<html>
<head>
<title>Frames</title>
</head>
<frameset rows="21%,*">
<frame src="top.htm" name="top.htm">
<frameset cols="10%,*">
<frame src="menu1.htm" name="menuarea">
<frame src="logininter.htm" name="pages">
</frameset>
</frameset>
</html>

top.htm

HTML Code:

<html>
<head>
<title>Top Frame</title>
</head>
<body>
<h1 align="center">Top Frame</h1>
</body>
</html>

menu1.htm

HTML Code:

<html>
<head>
<title>Menu</title>
<body>
<h1>Column 1</h1>
<table>
<tr>
<td>
<a href="menu2.htm" onClick='parent.pages.location.href="logininter.htm"' target="menuarea">Log in</a></td>
</tr>
<tr>
<td><a href="" >Guest</a></td>
</tr>
</table>
</body>
</head>
</html>

menu2.htm

HTML Code:

<html>
<head>
<title>Menu</title>
<body>
<h1>Column 2</h1>
<table>
<tr>
<td><a href="">Message</a></td>
</tr>
<tr>
<td><a href="" >Timetable</a></td>
</tr>
<tr>
<td><a href="" >Appointment</a></td>
</tr>
<tr>
<td><a href="" >Log out</a></td>
</tr>
</table>
</body>
</head>
</html>

logininter.htm

HTML Code:

<html>
<head>
<title>Main Page</title>
<script type="text/javascript">
function validatePwd(theform){
if(theform.username.value==""){
alert("Please enter user ID")
theform.username.focus()
return false
}
else if(theform.passwd.value==""){
alert("Please enter a password")
theform.passwd.focus()
return false
}
else if(theform.passwd.value !=12345){
alert("Password incorrect")
theform.passwd.focus()
theform.passwd.select()
return false
}
return true
}
</script>
</head>
<body>
<h1>Main Page 1</h1>
<form onsubmit="return validatePwd(this);" id="loginform" action="homepage.htm">
<fieldset>
<legend>Log in</legend>
<p>Please enter your User ID and Password to access</p>
<label for="username">User ID:<input type="text" name="username" id="username" tabindex="1"></label>
<label for="passwd">Password:<input type="password" name="passwd" id="passwd" tabindex="2"></label>
<label for="submit">
<input type="submit" class="submit" value="Log in"/></label>
<label for="reset">
<input type="reset" class="reset" value="Reset" /></label>
</fieldset>
</form>
</body>
</html>

hompage.htm

HTML Code:


<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Main Page 2</h1>
<div>
<p>* Option 1</p>
<p>* To Option 2</p>
<p>* To Option 3</p>
</div>
</body>
</html>

Howard_L · #2 12-Oct-2008, 23:10

Do you realize that a user can view the page source and see the username and password in the JS?
I think you would maybe validate that something was entered into the fields with JS and that passes submit to a server side script to do the actual authentication and return your main frame page layout which may or may not have the same layout as the login page.
Re: changing the contents of one frame from another , , I found myself asking the same sort of thing a few months ago and found some things which guided me to some solutions. It took me a while to locate the darned thing, but I finally found this example demo I created which I hope you will find helpful. I have to re-learn it myself as I've half forgotten it already.... it's been a whole two or three months!

HTML Code:


<!--  ==========  x1main.html  ========== 
      Note here that the ' name="blah" ' 
      in the frame tags below identifies that frame as an object which can be 
      referred to by other objects in the 'window'      
 -->
<html>
  <!-- frameset cols="70%,30%" -->
  <frameset cols="*,40%">
    <frame src="x1frame1.html" name="x1frame1" >
    <frame src="x1frame2.html" name="x1frame2" >
  </frameset>
</html>


<!--  ==========  x1frame1.html  ==========  -->
<html>
  <body>
    <script type="text/javascript">
      function testing()
      {
        var x="This alert box is generated by the testing() function declared in the x1frame1.html"
        alert(x)
      }
    </script>

    <br /> Hello from  x1frame1.html <br />
    <br />
    <button  > button1 - in plain html </button>  <br />

    <script type="text/javascript">
      document.write(" hello <br /> ");
      document.write(" <button  > button2 - in JS with no event stuff </button>  <br /> ");
      document.write(" <button onclick=testing() > button3 in JS with onclick=testing() </button>  <br /> ");
    </script>
    <br />
    <br />  These will reload frame2 ONLY without affecting this frame!:<br />

    <!-- This is from:  http://www.irt.org/script/591.htm
         reload one frame from another:
     -->
    <A HREF="javascript:parent.x1frame2.location.reload()"> Reload </A>

    <script text/javascript>
      document.write(" <br /> <button onclick=parent.x1frame2.location.reload() > reload x1frame1 </button> <br /> ");
      document.write(Date());
    </script>

  </body>
</html>


<!--  ==========  x1frame2.html  ==========  -->
<html>
  <body>
    Hello from  x1frame2.html <br />
    <br />This calls a function from frame1:<br />
    <script text/javascript>
      document.write(" <br /> <button onclick=parent.x1frame1.testing() > call 'testing()' <br /> from x1frame1 </button> ");
    </script>
    <br />
    <br />  These will reload frame1 ONLY without affecting this frame!:<br />

    <!-- This is from:  http://www.irt.org/script/591.htm
         reload one frame from another:
     -->
    <A HREF="javascript:parent.x1frame1.location.reload()"> Reload whatever's on  [0] </A>
    <br />
    <script text/javascript>
      document.write(" <br /> <button onclick=parent.x1frame1.location.reload() > Reload whatever's on  [0]  </button> <br />");
      document.write( Date() );
    </script>
    <br />
    <br />
    <script text/javascript>
      document.write(" <br /> <button onclick=parent.x1frame1.location='x1swapin.html' > load x1swapin.html in  x1frame1 </button> <br />");
      document.write(" <br /> <button onclick=parent.x1frame1.location='x1frame1.html' > load x1frame1.html in x1swapin </button> <br />");

      document.write(" <br /> <button onclick=parent.x1frame1.location='x2main.html'> Try this: x2main.html </button> <br />");

      documentiwrite( Date() );
    </script>
  </body>
</html>


<!--  ==========  x1swapin.html  ==========  -->
<html>
  <body>
    Hello from  x1swapin.html <br />
    <script text/javascript>
      document.write( Date() );
    </script>
  </body>
</html>

Pretty wild!

phoenix69 · #3 14-Oct-2008, 09:01

Thanks for helps

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Change the caption on button when clicked	drewdaman	MS Visual C++ / MFC Forum	5	31-May-2009 21:56
Server Button Control execute twice	bluebeta	.NET Forum	2	12-Jun-2006 10:25
How to save form data with Submit button on HDD?	stormlab	Web Design Forum	3	26-Feb-2006 17:30
Group Round buttons (radio buttons)	toaster	FLTK Forum	1	03-Jan-2006 07:57
Multiple submit buttons	WaltP	MySQL / PHP Forum	6	12-Aug-2004 19:46

Changing two frames using submit button

Re: Changing two frames using submit button

Re: Changing two frames using submit button