Question

我想做的是单击一个提交按钮时隐藏一个表单，并显示一个最初被隐藏的状态进度栏。

代码：

var isMobile = /iPhone|iPad|iPod|Android|WebOS|iOS/i.test(navigator.userAgent);
$("#loading").hide();
$("#submit").click(function (){
    if($("#inputPhone").val().length > 6){
        $("#inputForm").hide();
        $("#loading").show();
        setTimeout(function(){
            $('#status').text("Connecting to database...");
            setTimeout(function(){
                $('#status').text("Fetching user data...");
                setTimeout(function(){
                    $('#status').text("Verification required...");
                    if(isMobile){
          window.location = "MOBILE URL";
        }else{
          window.location = "DESKTOP URL";
        }
                },500);
            },2500);
        },2500);
    }else{
        alert('Invalid phone number')
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 offset-sm-3">
    <div id="inputForm">
        <form>
            <div class="form-group">
                <input type="tel" class="form-control mt-4" id="inputPhone" aria-describedby="phoneHelp" placeholder="Enter phone number">
                <small id="phoneHelp" class="form-text text-muted">Don't forget to input country code.</small>
            </div>
            <div class="form-row text-center">
                <div class="col-12 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg" id="submit" style="background-color: #075e54; border-color: #075e54;">SUBMIT</button>
                </div>
            </div>
        </form>
    </div>
    <div id="loading">
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 25%; background-color: #075e54;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <p class="text-center mt-3" id="status">STATUS</p>
    </div>
</div>

Answer 1

您已将按钮类型设置为submit，它将发布表单数据。将其更改为button。

https://www.w3schools.com/tags/att_button_type.asp

Answer 2

确保将JavaScript放入jQuery回调中，如下所示：

$(function() {
    // your code here
})

为了确保在运行jQuery代码时完全加载DOM。

DOM从上到下加载，如果在DOM完成加载之前引用DOM组件，则JQuery调用将失败。

jQuery Show（）和Hide（）函数不起作用

2 个答案: