By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,848 Members | 3,223 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,848 IT Pros & Developers. It's quick & easy.

Toggle 2 forms with radio button

P: 7
Hi all,

First here is the website of what I am trying to do: http://www.exmhosting.com/

Locate the login form on the top-right of the page. What I need to do is allow the user to sign into different sections of the website according to the radio button choice at login.

If the user chooses Webmail then they input their email address and password and login. If the user chooses clients they input their username and password and login.

My idea was to create 2 forms, 1 for webmail and 1 for clients and when they select a radio button the correct form is shown. If they select the other radio button the wrong form is hidden and the correct form made visible.

As you can also see I need to make this form horizontal and one 1 line, see website for example. The input box for the webmail will also need to be longer as the user inputs a full email address instead of a smaller username.

This needs to works obviously in IE as well as FF.

Thanks for any help.
Sep 24 '08 #1
Share this Question
Share on Google+
4 Replies


Atli
Expert 5K+
P: 5,058
Hi.

You could simply change the action property of the <form> element using the radio button's onclick event.

You could even set the width of the name text box to like that.
Sep 24 '08 #2

P: 7
Hi.

You could simply change the action property of the <form> element using the radio button's onclick event.

You could even set the width of the name text box to like that.
This sounds like a good idea to me. Can you give me a few tips on how I might do this. Obviosly I will use a function to do the changes but am not quite sure how.

This is what I have come up with so far and need some help with the bits in CAPITAL letters.

Expand|Select|Wrap|Line Numbers
  1. <form name='login' method='post' ACTION=''>
  2.   <label>webmail</label>
  3.   <input name='login' type='radio' value='webmail' ONCLICK='<? changeformsetting("webmail"); ?>' />
  4.   <label>clients</label>
  5.   <input name='login' type='radio' value='clients' checked='checked' ONCLICK='<? changeformsetting("clients"); ?>' />
  6.   <input type='text' name='user' id='loginUsername' SIZE='' VALUE='' />
  7.   <input type='password' name='pass' id='loginPassword' value='password' />
  8.   <input type='submit' value='Login' id='loginSubmit' />
  9. </form>
  10.  
  11. <script language="javascript"> 
  12. function changeformsetting(logintype) {
  13.   if ($logintype == "webmail") {
  14.     ACTION = "https://someurl.com";
  15.     SIZE = 20;
  16.     VALUE = "email address"; 
  17.   }
  18.   else {
  19.     ACTION = "/login.php";
  20.     SIZE = 10;
  21.     VALUE = "username"; 
  22.   }
  23. }
  24. </script> 
  25.  
Once again thanks for any help offered.
Sep 26 '08 #3

P: 7
Well I have worked it out and will put my solution here for anyone else who may be in a similar dilemma.

This is the from I used:
Expand|Select|Wrap|Line Numbers
  1.  
  2. <form name='login' id='loginform' method=post action='/logmein.php'>
  3.   <input name='login' type='radio' value='webmail' OnClick=\"changeformsetting('webmail','loginUsername','loginform');\" id='webmail' /><label>WEBMAIL</label>&nbsp;
  4.   <input name='login' type='radio' value='clients' OnClick=\"changeformsetting('clients','loginUsername','loginform');\" id='clients' checked='checked' /><label>CLIENTS</label>&nbsp;&nbsp;&nbsp;&nbsp;
  5.   <input type='text' name='user' id='loginUsername' value='username' size='20' />
  6.   <input type='password' name='pass' id='loginPassword' value='password' size='20' />";
  7.   <input type='submit' value='Login' id='loginSubmit' />
  8. </form>
  9.  
and this is the function I created to do the work:
Expand|Select|Wrap|Line Numbers
  1. function changeformsetting(id1,id2,id3) {
  2.   var el1 = id1; //radio button
  3.   var el2 = id2; //text input
  4.   var el3 = id3; //form
  5.   if (document.getElementById(el1).value == 'webmail') {
  6.     document.getElementById(el2).size = 30;
  7.     document.getElementById(el2).value = 'email address';
  8.     document.getElementById(el3).action = 'https://someurl/login/';
  9.   }
  10.   if (document.getElementById(el1).value == 'clients') {
  11.     document.getElementById(el2).size = 10;
  12.     document.getElementById(el2).value = 'username';
  13.     document.getElementById(el3).action = '/logmein.php';    
  14.   }
  15. }
  16.  
I know there are probably prettier ways of doing this but at least this works thanks to the advice of Atli.
Sep 26 '08 #4

Atli
Expert 5K+
P: 5,058
Glad you found a solution!
And thank you for sharing it.
Sep 26 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.