javascript - jQuery Show()和Hide()函数不起作用

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

码：

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>

最佳答案

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

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

关于javascript - jQuery Show()和Hide()函数不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51934578/