1

I am trying to do, form1 is hidden right now, if that username and password correct as in my code, than show form1 in same tab/window, so if username and password correct than next page says Hello! logged in, Is there any way that, i can do that?? I know i can create another html, if username and password correct than show that html, I can do that, I want to send html by email to if i send two html it won't work so, is there any way that i can do everything in one html, if username and password correct than show that hidden form.. Please help me!! Thanks!! 

    <!DOCTYPE html>
<!-- saved from url=(0042)http://jsfiddle.net/DrydenLong/RHwLW/show/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title> - jsFiddle demo by DrydenLong</title>

  <script type="text/javascript" src="./- jsFiddle demo by DrydenLong_files/jquery-1.9.1.js"></script>



  <script type="text/javascript" src="./- jsFiddle demo by DrydenLong_files/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="./- jsFiddle demo by DrydenLong_files/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="./- jsFiddle demo by DrydenLong_files/result-light.css">

  <style type="text/css">
    #hello, #sorry {
    display: none;
}
  </style>



<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(document).ready(function(){
    $("#my_button").click(function(){
        var userid = $("#user").val();
        var pass = $("#pass").val();
        if (userid == 'username' && pass == 'password') {
            $("#login").fadeOut('slow', function () {
            $("#hello").fadeIn();
        });
    } else {
        $("#login").fadeOut('slow', function () {
            $("#sorry").fadeIn();
        });
    }});});
});//]]>  

</script>


</head>
<body>
  <div id="login">
    <form name="login">Username
        <input type="text" name="userid" id="user">Password
        <input type="password" name="pswrd" id="pass">
        <input type="button" value="Login" id="my_button">
        <input type="reset" value="Cancel">
    </form>
</div>
<div id="hello">Hello! You are logged in.</div>
<div id="sorry">Sorry you have entered the wrong username or password</div>






</body></html>

Please help me!! Thanks!!

4

1 回答 1

0

好的，所以这使用 Jquery/JqueryUI 根据表单字段的值隐藏/显示内容。根据值，适当div的会淡入视图：

HTML

<div id="login">
    <form name="login">Username
        <input type="text" name="userid" id="user" />Password
        <input type="password" name="pswrd" id="pass" />
        <input type="button" value="Login" id="my_button"/>
        <input type="reset" value="Cancel" />
    </form>
    </div>
    <div id="hello">Hello! You are logged in.</div>
    <div id="sorry">Sorry you have entered the wrong username or password</div>

CSS

#hello, #sorry {
    display: none;
}

jQuery

$(document).ready(function () {
    $("#my_button").click(function () {
        var userid = $("#user").val();
        var pass = $("#pass").val();
        if (userid == 'username' && pass == 'password') {
            $("#login").fadeOut('slow', function () {
                $("#hello").fadeIn();
            });
        } else {
            $("#login").fadeOut('slow', function () {
                $("#sorry").fadeIn();
            });
        }
    });
});

现在，如果您希望您的网站具有安全的内容，则此代码存在一个主要问题。任何人都可以查看您页面的源代码并查看被隐藏的内容，从而违背了使用密码获取访问权限的目的。如果您想要更好的安全性，您将不得不想办法改进它。如果是这种情况，您可能需要研究一种服务器端脚本语言（例如 PHP）来解决安全问题。

如果安全性不是很重要，并且用户名/密码更多地用于显示内容而不是内容的体验，div那么这应该就可以了。

这是一个带有工作示例的小提琴：http: //jsfiddle.net/DrydenLong/RHwLW/

于 2013-08-02T20:54:17.090 回答