JQuery加载程序不工作于JQuery数据报警器

Question

我有一个JQuery加载屏幕，当按下表单提交按钮时会显示该屏幕：

$(document).ready(function () {
    $('#submit').click(function () {
        $("#plotLoader").show();
    });
});

表单主要是select类型，但我也有一个JQuery数据选择器来选择日期。加载屏幕为select类型显示得很完美，但当我从数据报警器中选择日期时，它根本不显示？

是什么导致了这一切，有什么办法解决这个问题？

编辑：

以下是我所要求的更多代码。

HTML表单：

<form id="options" method="post" action="SQLselecter.jsp">

        Plot Type: 
        <select name="PlotType" id="PlotType">
            <option value="Point">Point</option>
            <option value="Line">Line</option>
            <option value="Bar">Bar</option>
            <option value="Pie">Pie</option>
        </select>

        ADACS:
        <select name="ADACS" id="ADACS">
            <option value="ADACS">ADACS</option>
            <option value="ADACS">ADACS</option>
            <option value="ADACS">ADACS</option>
            <option value="ADACS">ADACS</option>
        </select>

        Skyline: 
        <select name="Skyline" id="Skyline">
            <option value="Skyline">Skyline</option>
            <option value="Skyline">Skyline</option>
            <option value="Skyline">Skyline</option>
            <option value="Skyline">Skyline</option>
        </select>

        AccessType:
        <select name="AccessType" id="AccessType">
            <option value="AccessType">AccessType</option>
            <option value="AccessType">AccessType</option>
            <option value="AccessType">AccessType</option>
            <option value="AccessType">AccessType</option>
        </select>

        Dates:
        <input type="text"  id="datepickerFrom" name="fromDate" placeholder="mm/dd/yyyy">
        <input type="text"  id="datepickerTo" name="toDate" placeholder="mm/dd/yyyy">

        <div id="buttons">
                <input type="submit" id="submit" value="Plot Graph" onclick="return check();">
        </div>
</form>

贾瓦克里普

function check()
    {
        if (document.getElementById('PlotType').value=="") {
        alert ("Please select plot type.");
        return false;
        }

        if (document.getElementById('datepickerFrom').value=="" && document.getElementById('datepickerTo').value==""
                && document.getElementById('Skyline').value=="" && document.getElementById('ADACS').value=="" && document.getElementById('AccessType').value=="" ) {
            alert ("Please select at least one search parameter.");
            return false;
        }

        if (document.getElementById('datepickerFrom').value!="" || document.getElementById('datepickerTo').value!="") {

            if (document.getElementById('datepickerFrom').value==""
             || document.getElementById('datepickerFrom').value==null )
            {
                alert ("Please Enter 'From date'.");
                return false;
            }
            if (document.getElementById('datepickerTo').value==""
                || document.getElementById('datepickerTo').value==null)
               {
                   alert ("Please Enter 'To date'.");
                   return false;
               }
            return true;
        }

        $(document).ready(function () {
            $('#submit').click(function () {
                $("#plotLoader").show();
            });
        });

    }

Answer 1

试试这个：

$('#submit').click(function (e) {
    e.preventDefault();
    $("#plotLoader").show();
});

更新：

关于的工作

您必须创建两个按钮：

1. 提供CSS visibility:hidden;的真正提交按钮
2. 一个虚拟按钮(一个看起来像按钮的数字按钮或div，它实际上只会显示加载程序并触发真正的提交按钮！)

解释

在你想要真正的按钮所在的地方使用虚拟按钮(我的意思是把它放在同一个地方)

点击虚拟按钮的事件写：

$('#dummy').click(function(){
    $("#plotLoader").show();
    setTimeout(function(){
        $('#submit').trigger('click');
    },500);
});

现在，当浏览器实际处理重定向时，用户可以看到加载程序。