尝试在 IE11 中提交表单,但无法正常工作
Trying to submit a form in IE11, and it's not working
我正在尝试提交一个表单,它适用于除 Internet Explorer 11 之外的所有浏览器。我在 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>
一个对我有用的解决方案是像这样设置全局变量事件的 属性 returnValue
:
$('a').on('click', function(event) {
if (window.event) {
window.event.returnValue = false;
}
event.preventDefault();
});
我正在尝试提交一个表单,它适用于除 Internet Explorer 11 之外的所有浏览器。我在 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>
一个对我有用的解决方案是像这样设置全局变量事件的 属性 returnValue
:
$('a').on('click', function(event) {
if (window.event) {
window.event.returnValue = false;
}
event.preventDefault();
});