Question

在显示带有加载gif的提示后，我想输入名称，提示我输入年龄。

输入年龄后，我想重定向到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>

Answer 1

您可以执行以下操作：我已经更新了您的代码。当然，您必须为微调器设置样式。这也是一个小提琴：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>

修改：对我来说还不清楚op是否将使用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/";
})

html自动输入检测和重定向

1 个答案: