AJAX 表单提交在 IE11 和 Edge 中不起作用
AJAX form submit doesn't work in IE11 and Edge
无法解决表单提交问题。我将此代码用于我的表单:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Callback request</h4>
</div>
<div class="modal-body">
<p>Please send us your contact information and we will call you back soon</p>
<form class="callback" method="post" id="form1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" required class="form-control" id="firstName" name="fio" placeholder="Your name">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
<input type="tel" required class="form-control" id="phoneNumber" name="phone" placeholder="Phone number">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email">
</div>
<br>
<textarea class="form-control hidden-sm hidden-xs" rows="3" id="textField" name="comment" placeholder="Additional information" style="width:100%"></textarea>
<input type="hidden" class="form-control" name="subject" value="Callback request">
</form>
<p class="text-center">We don't share any of your personal data with anyone</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary submit" form="form1" onclick="yaCounter12657748.reachGoal('order'); return true;">Submit</button>
</div>
</div>
</div>
</div>
还有这个脚本
<script type="text/javascript">
$(document).ready(function()
{
var msg = $("#form1").serialize();
var options = {
type: "POST",
url: "callback_form.php",
data: msg,
success: function(data) {
$("#modal p").fadeOut("fast");
$("#form1").fadeOut("fast", function(){
$(this).before("<h4 class='text-center'>Thank you for your message</h4>");
setTimeout("$('#modal').modal('hide')", 3000);
});
},
error: function(xhr, str){
alert("Error occured!");
}
};
$('#form1').submit(function(e) {
e.preventDefault();
$('#form1').ajaxSubmit(options);
});
});
</script>
该表单在 Mozilla、Opera、Chrome、Safari 和其他一些浏览器中运行良好,但在 IE11 和 Edge 中(我确定这不是全部列表)它没有任何作用当我点击提交按钮时。它不会消失,不会在控制台中显示任何错误。我还使用 jQuery 表单插件来解决 Safari 的问题,但不幸的是,由于某种原因它无法处理 IE 和 Edge。也许我这里有一些语法错误?
好的,我找到了为什么不能在 IE 中工作。您已在表单外插入按钮。把这个放在里面。工作正常!
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Callback request</h4>
</div>
<div class="modal-body">
<p>Please send us your contact information and we will call you back soon</p>
<form class="callback" method="post" id="form1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" required class="form-control" id="firstName" name="fio" placeholder="Your name">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
<input type="tel" required class="form-control" id="phoneNumber" name="phone" placeholder="Phone number">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email">
</div>
<br>
<textarea class="form-control hidden-sm hidden-xs" rows="3" id="textField" name="comment" placeholder="Additional information" style="width:100%"></textarea>
<input type="hidden" class="form-control" name="subject" value="Callback request">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary submit" form="form1" onclick="">Submit</button>
</div>
</form>
<p class="text-center">We don't share any of your personal data with anyone</p>
</div>
</div>
</div>
</div>
无法解决表单提交问题。我将此代码用于我的表单:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Callback request</h4>
</div>
<div class="modal-body">
<p>Please send us your contact information and we will call you back soon</p>
<form class="callback" method="post" id="form1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" required class="form-control" id="firstName" name="fio" placeholder="Your name">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
<input type="tel" required class="form-control" id="phoneNumber" name="phone" placeholder="Phone number">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email">
</div>
<br>
<textarea class="form-control hidden-sm hidden-xs" rows="3" id="textField" name="comment" placeholder="Additional information" style="width:100%"></textarea>
<input type="hidden" class="form-control" name="subject" value="Callback request">
</form>
<p class="text-center">We don't share any of your personal data with anyone</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary submit" form="form1" onclick="yaCounter12657748.reachGoal('order'); return true;">Submit</button>
</div>
</div>
</div>
</div>
还有这个脚本
<script type="text/javascript">
$(document).ready(function()
{
var msg = $("#form1").serialize();
var options = {
type: "POST",
url: "callback_form.php",
data: msg,
success: function(data) {
$("#modal p").fadeOut("fast");
$("#form1").fadeOut("fast", function(){
$(this).before("<h4 class='text-center'>Thank you for your message</h4>");
setTimeout("$('#modal').modal('hide')", 3000);
});
},
error: function(xhr, str){
alert("Error occured!");
}
};
$('#form1').submit(function(e) {
e.preventDefault();
$('#form1').ajaxSubmit(options);
});
});
</script>
该表单在 Mozilla、Opera、Chrome、Safari 和其他一些浏览器中运行良好,但在 IE11 和 Edge 中(我确定这不是全部列表)它没有任何作用当我点击提交按钮时。它不会消失,不会在控制台中显示任何错误。我还使用 jQuery 表单插件来解决 Safari 的问题,但不幸的是,由于某种原因它无法处理 IE 和 Edge。也许我这里有一些语法错误?
好的,我找到了为什么不能在 IE 中工作。您已在表单外插入按钮。把这个放在里面。工作正常!
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Callback request</h4>
</div>
<div class="modal-body">
<p>Please send us your contact information and we will call you back soon</p>
<form class="callback" method="post" id="form1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" required class="form-control" id="firstName" name="fio" placeholder="Your name">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
<input type="tel" required class="form-control" id="phoneNumber" name="phone" placeholder="Phone number">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email">
</div>
<br>
<textarea class="form-control hidden-sm hidden-xs" rows="3" id="textField" name="comment" placeholder="Additional information" style="width:100%"></textarea>
<input type="hidden" class="form-control" name="subject" value="Callback request">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary submit" form="form1" onclick="">Submit</button>
</div>
</form>
<p class="text-center">We don't share any of your personal data with anyone</p>
</div>
</div>
</div>
</div>