Sahithi Pallavi
Sahithi Pallavi
Computer Science
15 Jun 2012

JavaScript Problem for login form

I'm new to JavaScript and I'm facing a problem with simple User login form.
What I need is -

-> User should enter his username, password and his role and has to click submit. All fields are mandatory. And based on the user role, the appropriate login page of the user will be displayed and that should go with radio buttons.

I'm posting my code here, its not working properly. If I come in order by entering username, password, role, its working fine. If I click the radio button first and then clicked submit without entering username and password, I'm getting successful user display page.
Here is my JavaScript code.
<script type="text/javascript">
function validate(login){
if (login.userid.value=="") {
alert("Enter Your Username");
login.userid.focus();
return false; }
 
if (login.password.value==""){
alert("Enter Your pass");       
login.password.focus();
return false; }
 
if ( ( document.login.site[0].checked == false )
    && ( document.login.site[1].checked == false)
   && ( document.login.site[2].checked == false ) ) {
        alert ( "Please choose your Role: User1 or User2 or User3" );
      return false; }
 
return true;
}
 
 
function sub() {
window.location.href = site; }
 
function goTo(URL) {
site = URL; }
 
</script>
 

Here is my HTML login form code.
<form name="login"  method="post" action="" >
<table>
  <tr>
    <td>User ID</td>
    <td><input  type="text" name="userid" size="20" maxlength="50" /></td>
  </tr>
 
 
  <tr>
    <td>Password:</td>
    <td><input  type="password" name="password" size="20" maxlength="50" /></td>
  </tr>
 
  <tr>
    <td>Search Engine : </td>
    <td><input type="radio" name="site" onchange="if(this.checked){goTo('www.google.com')}"/>User 1<br>
    <input type="radio" name="site" onchange="if(this.checked){goTo('www.yahoo.com')}"/>User 2<br>
    <input type="radio" name="site" onchange="if(this.checked){goTo('www.Bing.com')}"/>User 3</td>
  </tr>
 
<tr><td></td>
<td>
  <input type="button" value="Submit" onclick="validate(login);sub();">
  </td> 
  </tr>
 
</table>
 
Sahithi Pallavi

Sahithi Pallavi

Computer Science
15 Jun 2012
Anoop Kumar

Anoop Kumar

Branch Unspecified
15 Jun 2012
If I click the radio button first and then clicked submit without entering username and password, I'm getting successful user display page.
here.
onclick="validate(login);sub();"
Call sub() in Validate function. not explicitly.
in your code, you are getting return false in Validate() but not in sub.
call sub() in Validate() as last line.
I think it will work 😀
Sahithi Pallavi

Sahithi Pallavi

Computer Science
15 Jun 2012
ianoop
here.
onclick="validate(login);sub();"
Call sub() in Validate function. not explicitly.
in your code, you are getting return false in Validate() but not in sub.
call sub() in Validate() as last line.
I think it will work 😀
ha ha Thank God sorry thank you. It was solved now.
How foolish thing I did? 😔
Anyway I got to know one type of problem and its solution, once again, thanks 😀
15 Jun 2012
Oyee!!! I assume that the form tag ends there. You had given <input type="radio" /> right? You can do this way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Sada</title>
        <style type="text/css">
            * {font-family: tahoma, sans-serif;}
            body, ul, li {margin: 0; padding: 0;}
            form ul li {list-style: none; padding: 5px 0;}
            form ul li span {display: block;}
            form ul li > * > span:first-child {display: inline-block; width: 125px; text-align: right; vertical-align: middle; margin-right: 10px;}
            form ul li span.radioholder {display: inline-block; vertical-align: middle;}
            form ul li > input {padding: 5px 20px; margin-left: 130px;}
        </style>
        <script type="text/javascript">
            function validate(login)
            {
                if (login.userid.value=="")
                {
                    alert("Enter Your Username");
                    login.userid.focus();
                    return false;
                }
                if (login.password.value=="")
                {
                    alert("Enter Your pass");
                    login.password.focus();
                    return false;
                }
                if ( !login.site[0].checked && !login.site[1].checked && !login.site[2].checked )
                {
                    alert ( "Please choose your Role: User1 or User2 or User3" );
                    return false;
                }
                else
                {
                    if ( login.site[0].checked ) location.href = 'https://' + login.site[0].value;
                    if ( login.site[1].checked ) location.href = 'https://' + login.site[1].value;
                    if ( login.site[2].checked ) location.href = 'https://' + login.site[2].value;
                }
                return false;
            }
        </script>
    </head>
 
    <body>
        <form name="login" method="post" action="" onsubmit="return validate(this);">
            <ul>
                [*]
                    <label>
                        <span>User ID</span>
                        <input type="text" name="userid" size="20" maxlength="50" />
                    </label>
                
                [*]
                    <label>
                        <span>Password</span>
                        <input  type="password" name="password" size="20" maxlength="50" />
                    </label>
                
                [*]
                    <div>
                        <span>Search Engine</span>
                        <span class="radioholder">
                            <label><input type="radio" name="site" value="www.google.com" /> Google</label>
                            <label><input type="radio" name="site" value="www.yahoo.com" /> Yahoo!</label>
                            <label><input type="radio" name="site" value="www.bing.com" /> Bing</label>
                        </span>
                    </div>
                
                [*]
                    <input type="submit" />
                
            </ul>
        </form>​​​​​​​​​​​​​​​​
    </body>
</html>
Sahithi Pallavi

Sahithi Pallavi

Computer Science
15 Jun 2012
Praveen-Kumar - Thank you so much, Your code is working good.
And as ianoop said I just called sub() in validate() so that no need to change my code.
And let me know which one is efficient? 😛
17 Jun 2012
Sada
Praveen-Kumar - Thank you so much, Your code is working good.
And as ianoop said I just called sub() in validate() so that no need to change my code.
And let me know which one is efficient? 😛
Actually, both are good programmatically. But UI wise, mine would be a better and semantic option. Agree?
Sahithi Pallavi

Sahithi Pallavi

Computer Science
17 Jun 2012
Praveen-Kumar
Actually, both are good programmatically. But UI wise, mine would be a better and semantic option. Agree?
Any justification? 😛
Sorry I'm new to Javascript.
17 Jun 2012
Sada
Any justification? 😛
Sorry I'm new to Javascript.
Na! Nothing related to JavaScript. Just compare both the codes, see the structure, readability, etc. and lemme know your opinion...
Sahithi Pallavi

Sahithi Pallavi

Computer Science
18 Jun 2012
Praveen-Kumar
Na! Nothing related to JavaScript. Just compare both the codes, see the structure, readability, etc. and lemme know your opinion...
Your code is good, no extra functions and all 👍

Share this content on your social channels -

Only logged in users can reply.