1

我已经定义了一个 div，其中基于 PHP 通过 ajax $.get 调用返回的 MySQL 表数据附加了一个具有默认输入值的表单。

div 看起来像：

<div id="esfContainer1">
</div> <!--end esfContainer1 div-->

div 相对于 body 标签是绝对定位的。

与表单验证关联的脚本在包含在调用表单的主页上时中断，因此我将其移至 PHP 输出 $formContent。

这是 PHP 输出中包含的表单验证和提交脚本：

<script type="text/javascript">

var senderName     = $("#sendName");
var senderEmail    = $("#fromemailAddress");
var recipientEmail = $("#toemailAddress");
var emailError     = $("#esemailerrorDiv");

senderName.blur(checkName);
senderEmail.blur(checkSEmail);
recipientEmail.blur(checkREmail);

function checkName() {
if (senderName.val() == "YOUR NAME") {
        $("#esemailerrorText").html("Please provide your name");
        $(emailError).removeClass("esemailError");
        $(emailError).addClass("esemailErrorNow");
        $(emailError).fadeIn("fast","linear");
        $(emailError).delay(2000).fadeOut("slow","linear");
        return false;
    } else {
        return true;
    }
};

function checkSEmail() {
    var a      = senderEmail.val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (filter.test(a)) {
        return true;
    } else {
        $("#esemailerrorText").html("Please enter a valid email address");
        $(emailError).removeClass("esemailError");
        $(emailError).addClass("esemailErrorNow");
        $(emailError).fadeIn("fast","linear");
        $(emailError).delay(2000).fadeOut("slow","linear");
        return false;
    }
};

function checkREmail() {
    var a      = recipientEmail.val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (filter.test(a)) {
        return true;
    } else {
        $("#esemailerrorText").html("Your friend\'s email is invalid");
        $(emailError).removeClass("esemailError");
        $(emailError).addClass("esemailErrorNow");
        $(emailError).fadeIn("fast","linear");
        $(emailError).delay(2000).fadeOut("slow","linear");
        return false;
    }
};

$("#emailForm").submit (function() {
    if (checkName() && checkSEmail() && checkREmail()) {

        var emailerData = $("#emailForm").serialize();
        $.get("style.php",emailerData,processEmailer).error("ouch");

        function processEmailer(data) {
            if (data=="fail") {
                return false;
            } else if (data=="pass") {
                $("#c1Wrapper").fadeOut("slow","linear");
                $("#confirmation").fadeIn("slow","linear");
                $("#esfContainer1").delay(2000).fadeOut("slow","linear");
                $("#backgroundOpacity").delay(2000).fadeOut("slow","linear");
                return false;
            }
        };
    return false;
    };
    return false;
});

我已经用“return false;”对上面的提交函数进行了轰炸。因为提交函数只是简单地打开处理 PHP 脚本而不是执行 $.get。使用 Firebug 观察提交函数报告 processEmailer 未定义。

我对此很陌生。我假设因为在提交函数中定义了 ajax 回调（并且 processEmailer 函数直接在 ajax 调用下面定义），所以定义不会有问题。

提前感谢您的帮助。

4

1 回答 1

0

你被函数语句困住了。函数声明（将被提升）不允许在块内（if/else/for 主体），如果它们出现在那里，则行为未定义。Firefox 有条件地定义它们，在你的情况下，在你在$.get调用中使用它之后 - 它当时在哪里undefined- 就像在var functionName = function() {}vsfunction functionName() {}中一样。

为了解决这个问题，简单地将它放在 if 块之外（甚至在整个回调之外）。顺便说一句，.error("ouch")不行，你需要传递一个函数。

$("#emailForm").submit (function() {
    if (checkName() && checkSEmail() && checkREmail()) {
        var emailerData = $("#emailForm").serialize();
        $.get("style.php",emailerData).done(processEmailer).fail(function() {
            console.log("ouch");
        });
    }
    return false;

    // now a proper function declaration, will be hoisted:
    function processEmailer(data) {
        if (data=="fail") {
            return false;
        } else if (data=="pass") {
            $("#c1Wrapper").fadeOut("slow","linear");
            $("#confirmation").fadeIn("slow","linear");
            $("#esfContainer1").delay(2000).fadeOut("slow","linear");
            $("#backgroundOpacity").delay(2000).fadeOut("slow","linear");
            return false;
        }
    }
});
于 2013-03-27T02:13:42.810 回答