Как сделать кнопку перенаправления моей страницы на другую страницу (в зависимости от ввода) - PullRequest
Новая
       17

Как сделать кнопку перенаправления моей страницы на другую страницу (в зависимости от ввода)

0 голосов
/ 12 апреля 2019

Я создал следующую страницу входа 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"

Ответы [ 3 ]

0 голосов
/ 12 апреля 2019

вы можете сделать что-то вроде ниже 

$(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>
0 голосов
/ 12 апреля 2019

Вы можете сделать это, добавив обработчик событий onchange или щелкнув по своему входу, пожалуйста, обратитесь к данному jsfiddle 

`http://jsfiddle.net/ce09xgt1/1/`
0 голосов
/ 12 апреля 2019

Есть несколько способов решить эту проблему.У вас есть беспорядок форм на странице.Вы можете изучить веб-форму, чтобы лучше понять проблему.Вот один из способов сделать то, что вы хотите. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...