Question

我在一个模态中提交一个表单（用magnific-popup插件制作），我遇到了问题。每次加载页面时都会显示弹出窗口，我可以使用AJAX汇总此表单。但是如果我想在点击按钮后加载模态，我就无法用AJAX提交它。有一个工作和不工作的代码示例。只有很小的差异。

NOT-工作：

<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>

Answer 1

您需要在致电$("#sleva").validate({...后致电$(".sleva-popup").magnificPopup({...。

当您的表单已加载时，document.ready函数会在开头验证它。否则，您必须手动 >在页面中插入表单后。

无法在一个巨大的弹出窗口中使用AJAX提交表单

1 个答案: