John.Hicks
John.Hicks

Reputation: 25

Trying to submit a form in IE11, and it's not working

I'm trying to submit a form and it works with every browser EXCEPT for Internet Explorer 11. What am I doing wrong for IE?

$(document).ready(function(){
    $("#contest-form").submit(function(event){
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
        if (validate()){
            handleSubmit()
            showSuccessModal();
            resetSubmitForm()
            return true;
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contest-form">
                <div class="form-header">
                    <img src="./assets/img/slashes.png" alt="">
                    <h2>Enter for a Chance to Win</h2>
                </div>

                <div class="form-dual-inputs">
                    <div>
                        <input required placeholder="First Name" id="first-name" class="input1" type="text">
                        <p id="first-error" style="display: none; color: red;">Field is required</p>
                    </div>
                    <div>
                        <input required placeholder="Last Name" id="last-name" class="input1" type="text">
                        <p id="last-error" style="display: none; color: red;">Field is required</p>
                    </div>
                </div>

                    <input required placeholder="Email" name="email" id="email" class="input2" type="text">
                    <p id="email-error" style="display: none; color: red;">Email is invalid</p>


                <div class="form-dual-inputs">

                    <div>
                        <input required placeholder="ZIP Code" id="zipcode" class="input3" type="text">
                        <p id="zip-error" style="display: none; color: red;">ZIP Code is invalid</p>

                    </div>

                    <div>
                        <select required id="airport-list">
                            <option hidden value="null">Please select a preferred airport</option>
                            <option value="(DTW)">Detroit, MI - (DTW)</option>
                        </select>
                        <p id="airport-error" style="display: none; color: red;">Airport is invalid</p>
                    </div>

                </div>

                <p class="form-details">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                </p>
                <p><a href="#modal-terms" id="termz" rel="modal:open">Terms & Conditions</a></p>

                <div style="display: flex; justify-content: center">
                    <input class="button" type="submit" value="submit" style="min-width: 285px" name="submit">
                </div>

            </form>

Upvotes: 2

Views: 251

Answers (1)

BLAKE
BLAKE

Reputation: 313

A solution that works for me is to set property returnValue of global variable event like this:

$('a').on('click', function(event) {
    if (window.event) {
        window.event.returnValue = false;
    }
    event.preventDefault();
});

Upvotes: 1

Related Questions