CrazyEngineers
  • JavaScript Problem for login form

    Sahithi Pallavi

    Sahithi Pallavi

    @sahithi-oJZaYj
    Updated: Oct 22, 2024
    Views: 898
    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>
     
    
    0
    Replies
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Replies
  • Sahithi Pallavi

    MemberJun 15, 2012

    Any help?
    #-Link-Snipped-# #-Link-Snipped-# #-Link-Snipped-# #-Link-Snipped-#
    Are you sure? This action cannot be undone.
    Cancel
  • Anoop Kumar

    MemberJun 15, 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 😀
    Are you sure? This action cannot be undone.
    Cancel
  • Sahithi Pallavi

    MemberJun 15, 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 😀
    Are you sure? This action cannot be undone.
    Cancel
  • PraveenKumar Purushothaman

    MemberJun 15, 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>
    Are you sure? This action cannot be undone.
    Cancel
  • Sahithi Pallavi

    MemberJun 15, 2012

    #-Link-Snipped-# - Thank you so much, Your code is working good.
    And as #-Link-Snipped-# said I just called sub() in validate() so that no need to change my code.
    And let me know which one is efficient? 😛
    Are you sure? This action cannot be undone.
    Cancel
  • PraveenKumar Purushothaman

    MemberJun 17, 2012

    Sada
    #-Link-Snipped-# - Thank you so much, Your code is working good.
    And as #-Link-Snipped-# 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?
    Are you sure? This action cannot be undone.
    Cancel
  • Sahithi Pallavi

    MemberJun 17, 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.
    Are you sure? This action cannot be undone.
    Cancel
  • PraveenKumar Purushothaman

    MemberJun 17, 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...
    Are you sure? This action cannot be undone.
    Cancel
  • Sahithi Pallavi

    MemberJun 17, 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 👍
    Are you sure? This action cannot be undone.
    Cancel
Home Channels Search Login Register