How to change client side javascript 's variable from server side?

Question

I took inspiration from a code of a login page from a certain website. I find a function which I do not know how to implement.

That login page uses two input controls in a form to gather username and password:

<form method="post" runat="server" action="myLogin.aspx">

    <input type="text" class="us_name" name="txtUserName" id="txtUserName" value="" />

    <input type="password" class="us_pwd" name="txtPassword" id="txtPassword" value="" />
</form>

and in that page, I also find some JQuery code like this:

 <script language="javascript" type="text/javascript">
     $(document).ready(function () {
         var error = 0;
         if (error > 0) {
             switch (error) {
                 case 1:
                     $("#ListMsg").html("username and pwd can not be empty");
                     $("#txtUserName").focus();
                     break;
                 case 2:
                     $("#ListMsg").html("Pic code can not be empty");
                     $("#txtCheckCode").focus();
                     break;
                 case 3:
                     $("#ListMsg").html("Pic code err");
                     $("#txtCheckCode").focus();
                     break;
                 case 36006:
                     $("#ListMsg").html("username err");
                     $("#txtCheckCode").focus();
                     break;
                 case 36007:
                     $("#ListMsg").html("password err");
                     $("#txtCheckCode").focus();
                     break;
                 case 20012:
                     $("#ListMsg").html("account is lock");
                     $("#txtCheckCode").focus();
                     break;
                 case 10007:
                     $("#ListMsg").html("can not access");
                     $("#txtCheckCode").focus();
                     break;
                 default:
                     $("#ListMsg").html("username or password err");
                     $("#txtPassword").focus();
                     break;
             }
         }
     });

It seems that above code is to display error message when login fails, but please notice this statement:

    var error = 0;

When I type a wrong password and view page source, I find it has automatically changed to :

    var error = 36007;

I guess this variable must be changed by server side code when login fails and use it to indicate fail reason. But I do not know how server can set client side JQuery variable's value, can anybody give me an example?

Answer 1

you can use ajax to facilitate communication between your script and php server without changing the page. when user clicks login button, you can send his/her input values as an ajax post. consider the following example:

$( '#btn-login' ).click( function () {
     $.ajax({
          url: "your.server.address/function_that_sends_those_codes",
          data: {
                    userID: $( '#txtUserName' ).val(),
                    pwd: $( '#txtPassword' ).val()
                },
          type: 'POST',
          dataType: 'JSON',

          success: function ( response ) {
                                    error = response.errCode; //or whatever your server
                                                              //sends
                                },
          error: function ( errorMsg ) {
                                    console.log( errorMsg );
                             }
     });
});

in your php code, you retrieve data sent using $_POST[ 'userID' ] and $_POST[ 'pwd' ] . you calculate your code by interacting with database, and you do this:

echo json_encode( array( yourErrorCode ) );

'yourErrorCode' is sent as 'response' to your 'success' callback function. you can view the response received, or any error thrown, in the console of your browser.

happy coding :)

Answer 2

To set javascript variable from code behind you can register a client script . like this:

 ScriptManager.RegisterStartupScript(this, this.GetType(), "", "error = 36007;", true);