CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
katie hudson
katie hudson

Reputation: 2893

Hiding element in IE causing form submit

I am getting some strange behaviour within IE which I was hoping someone might be able to explain. I have a simple form with an address lookup input

<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>

The address is entered into the input, then the search button is clicked. This makes a call to an API to return addresses and populate the a select input with them. This all works fine in all browsers, but noticed something strange with IE. This is the Javascript that handles the API call and populating of the select.

!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);

So when an address is selected from the select input, I hide the select input. On IE, this hiding of this element seems to make the form submit. You can see above that I have added some code to check that it is not IE and only hide on these devices, and keeping the select in place on IE works fine. Also, if I put an alert at the top of the change event, this also seems to stop the form submitting in IE.

So I was wondering what may be causing this to submit in IE if I hide the select? I have read that IE does not like buttons to be used as form submits, but not sure if this is the issue?

Is there any way to get the select hiding in IE?

Thanks

Upvotes: 0

Views: 200

Answers (2)

ESP32
ESP32

Reputation: 8728

The reason why your form submits is the fact that you have a button of type "submit" in your form.

<button type="submit"...>

Whenever you press enter, this will cause your form to submit. You need to change your submit button to another type like "button" and add a Javascript event handler to it (for example onClick="submit()").

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

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

Upvotes: 0

Zhi Lv
Zhi Lv

Reputation: 21526

So I was wondering what may be causing this to submit in IE if I hide the select? I have read that IE does not like buttons to be used as form submits, but not sure if this is the issue?

I can't reproduce your problem, everything works well on my side (IE 11.1.17340.0 version).

Please try to use the following code: (based on your code, please note the part of code with comment)

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/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([]);
                //})
                //using the following array to populate the select.
                var datalist = [{ "ID": "1", "ParentID": "0", "Name": "Parent1" }, { "ID": "2", "ParentID": "0", "Name": "Parent2" },
                { "ID": "3", "ParentID": "1", "Name": "Child 1.1" }, { "ID": "4", "ParentID": "1", "Name": "Child 1.2" },
                { "ID": "5", "ParentID": "3", "Name": "SubChild 1.1.1" }, { "ID": "6", "ParentID": "2", "Name": "Child 2.1" }];

                callback(datalist);
            };

            var init = function () {
                $("input.address").each(function () {
                    var $input = $(this);
                    var $icon = $input.next('.address-button');
                    //you are using the .row class to find the select control, but from your form, I can't find this class.
                    var $select = $input.parents('.row').eq(0).find("select");
                    //debugger;
                    $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 () {
                        $select.empty();
                        $select.append("<option value=''>Enter above</option>");
                        getAddresses($input.val(), function (addresses) {
                            //populate select options with addresses                           
                            $.each(addresses, function (index, item) {
                                //debugger;
                                $select.append("<option value='" + item.ID + "'>" + item.Name + "</option>");
                            });

                            $select.css("display", "block");
                        });
                    });

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

                        var ua = window.navigator.userAgent;
                        var is_ie = /MSIE|Trident/.test(ua);
                        //get the selected text and populate the input text.
                        $input.val($(this).find("option:selected").text());

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

                    });
                });
            };

        }(jQuery, window);
    </script>
</head>
<body>
    <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 row">
            <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://i.imgur.com/H9FIags.jpg" style="height:10px;width:10px" />
                    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" >
                    <option value="">Enter above</option>
                </select>
            </div>
        </div>
        <button type="submit" class="btn submit btn-navigation">
            Continue
        </button>
    </form>
</body>

The output as below:

enter image description here

Upvotes: 3

Related Questions