我正在模态中提交表单(使用 magnific-popup 插件制作),但遇到问题。每次加载页面时都会显示弹出窗口,我可以使用 AJAX 提交此表单。但是如果我想在单击按钮后加载模态,我无法使用 AJAX 提交它。有一个工作和不工作的代码示例。只是有一些细微的差别。
不工作:
<script type="text/javascript">
$(document).ready(function() {
// jQuery Validation
$("#sleva").validate({
// if valid, post data via AJAX
submitHandler: function(form) {
$.post("/mail.php", { email: $("#email2").val(), sleva: "ano" }, function(data) {});
},
// all fields are required
rules: {
email2: {
required: true,
email: true
}
}
});
$(".sleva-popup").magnificPopup({
items: {
src: '<div class="white-popup">' +
'<form id="sleva" action="/mail.php" method="post">'+
'<input type="text" name="email2" id="email2" placeholder="Váše e-mailová adresa" style="padding: 6px;" />' +
'<input type="submit" name="Submit" class="ziskej_slevu" value="Potvrdit"></div>' +
'</form>' +
'</div>',
type: 'inline'
},
closeBtnInside: true
});
});
</script>
工作:
<script type="text/javascript">
$(document).ready(function() {
// jQuery Validation
$("#sleva").validate({
// if valid, post data via AJAX
submitHandler: function(form) {
$.post("/mail.php", { email: $("#email2").val(), sleva: "ano" }, function(data) {});
},
// all fields are required
rules: {
email2: {
required: true,
email: true
}
}
});
});
$.magnificPopup.open({
items: {
src: '<div class="white-popup">' +
'<form id="sleva" action="/mail.php" method="post">'+
'<input type="text" name="email2" id="email2" placeholder="Váše e-mailová adresa" style="padding: 6px;" />' +
'<input type="submit" name="Submit" class="ziskej_slevu" value="Potvrdit"></div>' +
'</form>' +
'</div>',
type: 'inline'
},
closeBtnInside: true
});
</script>
最佳答案
在调用 $(".sleva-popup").magnificPopup({. ..
.
当您的表单已加载时,您的 document.ready 函数会在开始时对其进行验证。 否则,您必须在将表单插入页面后手动执行此操作。
关于javascript - 无法在放大的弹出窗口内使用 AJAX 提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27205436/