简体   繁体   中英

how to create a log in window where my username and password is from a server?

i have this html and javascript program code for log in window. my html is:

<body>
  <div >
    <h1>Sign in to me</h1>      
    <form id="login" method="get" action='exercises/exercise6/DynamicMenu_createTab_json.html'>
       <div>UserName<input type="text" id="username" value="admin"/></div>
       <div>Password<input type="password" id="password"/></div>  
       <div><input type="button" id="btnLogin" value="Login"/></div>
  </div>    
</body>

my javascript is:

$(document).ready(function(){
    $('#username').focus();
    $('form#login :submit').addClass('inputSubmitBtn').click(function(){
       if($('#username').val() != "jay" || $('#password').val() != "son"){
           alert('username/password incorrect');    
           $("#username").focus();
           return false;
       };
    });
});

there's no problem in this program. what i wanted to do is i want to log in using my username and password from a server. and if it is succesful, it will open my other exercise html on the same window. here's my current code:

$('form#login :submit').addClass('inputSubmitBtn').click(function(){
    var params = {
       "UserName":$("#username").val(),
       "Password":$("#password").val()
    };

    $.getJSON(
    'process.php', 'path=Login&json='  + JSON.stringify(params),  
    function(data) {
       if ('error' in data)
       {
          alert('password and username incorrect');
          return false;
       }
       else
       {
          $("#sessionID").html(data["result"]["SessionID"]);    

       }
    }); 
});

this code doesn't function right. please, can someone help me on this...

EDIT: here's my php code:

<?php 
   echo(file_get_contents("http://localhost/" . $_GET["path"] . "?json=" . $_GET["json"]));
?>

First the :submit selector returns nothing, you don't have a submit button ("type=submit"), so the click listener will never be called. See :submit selector .

Second you don't stop the submit event of the form, so the "action" attribute is used and the form is submitted, canceling the click listener function. (url 'exercises/exercise6/DynamicMenu_createTab_json.html' will be loaded)

You need to stop the event, else the form "action" will fire when the form is submitted.

$('#login :submit').click(function(event){ event.preventDefault(); ... });

And last, a click event listener function on the submit button will not fire 100% of the time.
For exemple when user press "enter" key while in a field of the form, no click on the button and the form is submitted.
Bind a submit event listener on the form instead.

$('#login').submit(function(event){ ... });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM