Toggle 2 forms with radio button

[makunta]

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.

[Atli]

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.

[makunta]

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.

<form name='login' method='post' ACTION=''>
  <label>webmail</label>
  <input name='login' type='radio' value='webmail' ONCLICK='<? changeformsetting("webmail"); ?>' />
  <label>clients</label>
  <input name='login' type='radio' value='clients' checked='checked' ONCLICK='<? changeformsetting("clients"); ?>' />
  <input type='text' name='user' id='loginUsername' SIZE='' VALUE='' />
  <input type='password' name='pass' id='loginPassword' value='password' />
  <input type='submit' value='Login' id='loginSubmit' />
</form>
 
<script language="javascript"> 
function changeformsetting(logintype) {
  if ($logintype == "webmail") {
    ACTION = "https://someurl.com";
    SIZE = 20;
    VALUE = "email address"; 
  }
  else {
    ACTION = "/login.php";
    SIZE = 10;
    VALUE = "username"; 
  }
}
</script> 
 

Once again thanks for any help offered.

[makunta]

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:

 
<form name='login' id='loginform' method=post action='/logmein.php'>
  <input name='login' type='radio' value='webmail' OnClick=\"changeformsetting('webmail','loginUsername','loginform');\" id='webmail' /><label>WEBMAIL</label>&nbsp;
  <input name='login' type='radio' value='clients' OnClick=\"changeformsetting('clients','loginUsername','loginform');\" id='clients' checked='checked' /><label>CLIENTS</label>&nbsp;&nbsp;&nbsp;&nbsp;
  <input type='text' name='user' id='loginUsername' value='username' size='20' />
  <input type='password' name='pass' id='loginPassword' value='password' size='20' />";
  <input type='submit' value='Login' id='loginSubmit' />
</form>
 

and this is the function I created to do the work:

function changeformsetting(id1,id2,id3) {
  var el1 = id1; //radio button
  var el2 = id2; //text input
  var el3 = id3; //form
  if (document.getElementById(el1).value == 'webmail') {
    document.getElementById(el2).size = 30;
    document.getElementById(el2).value = 'email address';
    document.getElementById(el3).action = 'https://someurl/login/';
  }
  if (document.getElementById(el1).value == 'clients') {
    document.getElementById(el2).size = 10;
    document.getElementById(el2).value = 'username';
    document.getElementById(el3).action = '/logmein.php';    
  }
}
 

I know there are probably prettier ways of doing this but at least this works thanks to the advice of Atli.

[Atli]

Glad you found a solution!
And thank you for sharing it.