Question

我正在使用jQuery Form插件来提交AJAX请求。使用这个PHP脚本是一个简单的联系：http://pastie.org/725652 - 唯一的验证发生在PHP内部。

这是我的Javascript代码触发整个事情：

$('#contactform').ajaxForm({
    target: '#error',
    beforeSubmit: function() {
        $('#error').append('<p class="loading">Sending your message...</p>');
    },
   success: function() {
       $('#error p.loading').fadeOut();
       $('#error').fadeIn('slow');
    }
});

不幸的是，它似乎不起作用。 PHP工作正常，发送电子邮件并返回成功消息，但AJAX魔法由于某种原因不起作用。显然我想要实现的是在<div id="error />

中通过AJAX显示PHP脚本返回的消息

我多次使用相同的脚本并且从未遇到过任何问题，现在我无法弄清楚它为什么不起作用。这是联系表格的标记。

<form id="contactform" class="group" method="post" action="submitemail.php">
    <fieldset>
        <div><label for="first-name">First Name</label>
        <input type="text" name="first-name" value="Jeremy" /></div>

        <div class="alt"><label for="last-name">Last Name</label>
        <input type="text" name="last-name" value="Anderson" /></div>

        <div><label for="email">E-mail <span>(never published)</span></label>
        <input type="text" name="email" value="jeremyanderson@mywebsite.com" /></div>

        <div class="alt"><label for="url">Website</label>
        <input type="text" name="url" value="http://www.mywebsite.com" /></div>

        <label for="question">Message</label>
        <textarea name="question" id="" cols="30" rows="10">Thinking of something to say...</textarea>

        <input type="submit" name="submit" id="submit" value="Send E-mail" />
        <div id="error"></div>
    </fieldset>
</form>

这是jQuery插件的代码，如果它可以是任何帮助。 http://pastie.org/726175

如果有人能看到整件事并提供一些提示，为什么它不起作用，我将非常感激，提前谢谢！

Answer 1

您必须包含PHP响应的参数：

编辑：

尝试使用这些更改，在此示例中，我将消息“loading”与响应消息分开。

HTML：

<form id="contactform" class="group" method="post" action="submitemail.php">
    <fieldset>
        <!-- fields -->

        <input type="submit" name="submit" id="submit" value="Send E-mail" />
        <div id="error"><span id="eloading"></span><span id="eresponse"></span></div>
    </fieldset>
</form>

使用Javascript：

$('#contactform').ajaxForm({
    target: '#eresponse',
    beforeSubmit: function() {
        $('#eresponse').hide('slow');
        $("#eloading").append("<p class=\"loading\">Sending your message...</p>");
    },
    success: function(responseText, statusText) {

        alert("test status: " + statusText + "\n\nresponseText: \n" + responseText);
        $("#eloading").empty();
        $('#eresponse').show('slow');
    }
});

Answer 2

它没有做到这一点:(它仍然转到submitemail.php文件成功消息而不是显示 #error中的消息。 - 贾斯汀39 分钟前

如果发生这种情况，则意味着附加到提交事件的功能并未以

结束

return false;

我相信ajaxForm这是自动完成的，这意味着代码中的某个地方存在错误。如果您没有安装firebug，请安装它并密切关注控制台，确保：

jquery正在加载
没有设置ajax的错误互动或任何其他js 可能阻止它的页面

使用PHP和jQuery表单插件联系表单

2 个答案: