Reputation: 25
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
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