HTML автоматический ввод, обнаружение и перенаправление - PullRequest
0 голосов
/ 05 декабря 2018

я хочу вводить имена после того, как на экране появится изображение с загрузкой gif, предложите мне ввести мой возраст.

Я хочу, после ввода моего возраста, меня перенаправляют на URL.любой URL, как stackoverflow.com

Я обновил свой вопрос до выше.но все та же проблема

<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">


</head>

<body>
<form method="post">
<p>
  <input type="text" name="myname" />
</p
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>

<div id="spinner">
  <img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site 
  </div>
  <input type="text" name="age" />
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
  $('form').submit(function() {
    $('#spinner').show(); //activate spinner on submit
    $.ajax({
        type: 'POST',
        url: 'https://localhost',
        dataType: 'json',
        success: function(json) {
            //  $('#spinner').hide(); //not necessary because of redirect
            window.location.href = "http://www.wdr.de";
        },
        error: function(){
            $('#spinner').hide();
        }
    return false;
});
</script>
</body>

</html>

1 Ответ

0 голосов
/ 05 декабря 2018

вы можете сделать что-то вроде этого: я обновил ваш код.Конечно, вы должны установить стиль для вашего блесны.Вот еще одна скрипка: https://jsfiddle.net/mattopen/pkb4xs7w/41/

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>title</title>
</head>

<body>
<form method="post">
    <p>
        <input type="text" name="myname" />
    </p>
    <label>
        <input type="submit" name="submit" value="Enter your names" />
    </label>
</form>
<div style="display:none;">
    <p>enter your age to enter this site</p>
    <p>mr.myname</p>

    <div id="spinner">
        <img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
    </div>
    <input type="text" name="age" />
</div>
<script>

    $('form').submit(function() {
        $('#spinner').show(); //activate spinner
        $.ajax({
            type: 'POST',
            url: '/your_url/submit_username',
            dataType: 'json',
            success: function (json) {
                alert('redirect');
                //  $('#spinner').hide(); //not necessary because of redirect
                window.location.href = "https://jsfiddle.net/";
            },
            error: function () {
                alert('something went wrong');
                $('#spinner').hide();
                window.location.href = "https://jsfiddle.net/";
            }
        });
    })

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

edit: Мне не было ясно, будет ли оператор использовать вызов ajax и отправлять данные на сервер или только хочет проверить?ввод даты, а затем перенаправление на URL.Если op будет использовать ajax, то '/ your_url / submit_username' должен быть действительным URL-адресом в вашем приложении.Этот подход без использования ajax-вызова.

$('input[name="submit"]').click(function(event) {
    event.preventDefault();
    $('#spinner').show(); //activate spinner

    //  here goes your code for check input
    //  function check(){....; return 'ok'};
    //  now redirect if check was ok like if(check === 'ok')
    window.location.href = "https://jsfiddle.net/";
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...