Question

我在登录页面后创建了 code.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <style>
        .login-form {
            width: 300px;
            margin: 0 auto;
            font-family: Tahoma, Geneva, sans-serif;
        }
        .login-form h1 {
            text-align: center;
            color: #4d4d4d;
            font-size: 24px;
            padding: 20px 0 20px 0;
        }
        .login-form input[type="password"],
        .login-form input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #dddddd;
            margin-bottom: 15px;
            box-sizing:border-box;
        }
        .login-form input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #535b63;
            border: 0;
            box-sizing: border-box;
            cursor: pointer;
            font-weight: bold;
            color: #ffffff;
        }
        </style>
    </head>
    <body>
        <div class="login-form">
            <h1>Please enter a password:</h1>
            <form action="auth" method="POST">

                <form action="google.com">
<input type="password" name="password" placeholder="Password" required>
                </form>

<form action="http://google.com">
    <input type="submit" value="Send" />
</form>
            </form>
        </div>
    </body>
</html>

根据密码的输入，我想重定向到另一页。因此，如果有人写“ 1111”，他应该登陆Google。如果有人写“ 1234”，那么他应该登陆youtube，而如果两者都不写，那么他应该停留在页面上并看到错误消息。例如：“ pw错误”

Answer 1

有多种解决方法。您页面上的表格一团糟。您可能需要研究Web表单，以更好地理解问题。这是做自己想要的一种方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <style>
        .login-form {
            width: 300px;
            margin: 0 auto;
            font-family: Tahoma, Geneva, sans-serif;
        }
        .login-form h1 {
            text-align: center;
            color: #4d4d4d;
            font-size: 24px;
            padding: 20px 0 20px 0;
        }
        .login-form input[type="password"],
        .login-form input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #dddddd;
            margin-bottom: 15px;
            box-sizing:border-box;
        }
        .login-form input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #535b63;
            border: 0;
            box-sizing: border-box;
            cursor: pointer;
            font-weight: bold;
            color: #ffffff;
        }
        </style>
    </head>
    <body>
        <div class="login-form">
            <h1>Please enter a password:</h1>
            <form>
                <input id="passwordTextbox" type="password" name="password" placeholder="Password" required>
                <input id="submitButton" type="submit" value="Send" />
            </form>
        </div>
        <script type="text/javascript">

            window.addEventListener('DOMContentLoaded', function(event){
                document.getElementById('submitButton').addEventListener('click', function(e){
                    e.preventDefault();
                    var value = document.getElementById('passwordTextbox').value;
                    if (value=='1111') {
                        window.location.href = 'https://www.google.com';
                    } else if (value=='1234') {
                        window.location.href = 'https://www.youtube.com';
                    } else {
                        // show error
                        alert('Password is invalid');
                    }
                });
            });

        </script>
    </body>
</html>

Answer 2

您可以执行以下操作

$(document).on('click', '#send', function(e) {

var values = $('#password').val();

if(values == 1111) {
  location ="google.com";
}

} )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <style>
        .login-form {
            width: 300px;
            margin: 0 auto;
            font-family: Tahoma, Geneva, sans-serif;
        }
        .login-form h1 {
            text-align: center;
            color: #4d4d4d;
            font-size: 24px;
            padding: 20px 0 20px 0;
        }
        .login-form input[type="password"],
        .login-form input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #dddddd;
            margin-bottom: 15px;
            box-sizing:border-box;
        }
        .login-form input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #535b63;
            border: 0;
            box-sizing: border-box;
            cursor: pointer;
            font-weight: bold;
            color: #ffffff;
        }
        </style>
    </head>
    <body>
        <div class="login-form">
            <h1>Please enter a password:</h1>
            <form action="auth" method="POST">

        <input type="password" name="password" id="password" placeholder="Password" required>
        <input type="button" id="send" value="Send" />
              


            </form>
        </div>
    </body>
</html>

Answer 3

您可以通过在输入中添加事件监听器onchange或onclick来实现，请参考给定的jsfiddle

`http://jsfiddle.net/ce09xgt1/1/`

如何使按钮将页面重定向到另一个页面（取决于输入）

3 个答案: