Question

我在IE中收到一些奇怪的行为，我希望有人能够解释。我有一个带有地址查询输入的简单表单

<form action="http://localhost:8000/processForm" method="post">
    <label for="input_1" class="form-control-label col-xs-12">
        Postcode
    </label>

    <div class="col-xs-12">
        <div class="input-group">
            <input type="text" name="questions[1]" autocomplete="off" id="input_1" class="form-control address" value="" >

            <a class="btn btn-xs input-group-addon address-button" id="input_address_addon" role="button" tabindex="0">
                <img src="http://localhost:8000/images/glyphicons-243-map-marker.png">
                Search
            </a>
        </div>
        <div class="col-xs-12 col-sm-8 col-sm-offset-4 col-md-7">
            <select class="form-control selectpicker addSelect" id="input_address_select" style="display: none;">
                <option value="">Enter above</option>
            </select>
        </div>
    </div>
    <button type="submit" class="btn submit btn-navigation">
        Continue
    </button>
</form>

将地址输入到输入中，然后单击搜索按钮。这将调用API以返回地址，并使用地址填充选择输入。这一切在所有浏览器中都可以正常运行，但是注意到IE有点奇怪。这是处理API调用和select填充的Javascript。

!function ($, window) {

    $(function () {
        init();
    });

    var getAddresses = function (postcode, callback) {
        var $xhr = $.getJSON('/lookupPostcode/' + postcode);
        $xhr.done(function (data) {
            callback(data);
        });
        $xhr.error(function () {
            callback([]);
        })
    };

    var init = function () {
        $("input.address").each(function () {
            var $input = $(this);
            var $icon = $input.next('.address-button');
            var $select = $input.parents('.row').eq(0).find("select");

            $select.css("display", "none");

            var onKeyUp = function (e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    e.stopPropagation();
                    $icon.trigger("click");
                }
            };
            var onKeyDown = function(e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            };

            $input.on("keyup", onKeyUp);
            $input.on("keydown", onKeyDown);
            $icon.on("keyup", onKeyUp);
            $icon.on("keydown", onKeyDown);
            $select.on("keyup", onKeyUp);

            $icon.on("click", function () {
                getAddresses($input.val(), function (addresses) {
                    //populate select options with addresses
                });
            });

            $select.on('change', function (event) {

                var ua = window.navigator.userAgent;
                var is_ie = /MSIE|Trident/.test(ua);

                if ( !is_ie ) {
                    $select.css("display", "none");
                }
                /*$select.css("display", "none");*/
            });
        });
    };

}(jQuery, window);

因此，当从选择输入中选择一个地址时，我将隐藏选择输入。在IE上，此元素的隐藏似乎使表单得以提交。您可以在上面看到我添加了一些代码来检查它是否不是IE，并且仅隐藏在这些设备上，并且在IE上将选择保持在适当的位置可以正常工作。另外，如果我在更改事件的顶部放置了警报，这似乎也停止了在IE中提交表单。

所以我想知道如果我隐藏选择内容，可能是什么导致此问题在IE中提交？我已经读过IE不喜欢将按钮用作表单提交，但是不确定是否是问题所在？

有什么方法可以将选择隐藏在IE中吗？

谢谢

Answer 1

所以我想知道是什么原因导致我在隐藏时在IE中提交选择？我读过IE不喜欢将按钮用作表单提交了，但不确定是不是这个问题？

我无法重现您的问题，一切都对我有利（IE 11.1.17340.0版本）。

请尝试使用以下代码：（根据您的代码，请在代码部分加上注释）

*.a

输出如下：

Answer 2

提交表单的原因是您的表单中有一个“提交”类型的按钮。

<button type="submit"...>

每当您按Enter键，这将导致您的表单提交。您需要将提交按钮更改为其他类型，例如“按钮”，并向其中添加一个Javascript事件处理程序（例如onClick="submit()"）。

<button type="button" class="btn submit btn-navigation" onClick="submit(this.form)">
    Continue
</button>

function submit(form){
    form.submit();
}

IE中的隐藏元素导致表单提交

2 个答案: