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

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

这里是我的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魔术由于某种原因不起作用。很显然我想实现的是通过AJAX显示PHP脚本通过AJAX返回的消息<div id="error />

我多次使用相同的脚本，从来没有任何问题，现在我不明白为什么它不起作用。这是联系表单的标记。

<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="[email protected]" /></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

如果有人可以看看整个事情，并提供一些技巧，为什么它不起作用，我会非常感激，提前致谢！

来源

2009-12-03 Justine

我开始认为这只是一个简单的错字，但我通常会复制/粘贴以前项目中的所有脚本。通过这个看了十几次，仍然无法发现它... – Justine 2009-12-03 20:23:40

必须包含在其中是从PHP的响应参数：

编辑：

尝试这些变化，在这个例子中，我分开消息“加载”与响应消息。

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'); 
    } 
});

来源

2009-12-03 20:15:43

它没有这样做：（它仍然会通过成功消息进入submitemail.php文件，而不是在#error中显示消息。 – Justine 2009-12-03 20:22:39

它没有做的伎俩:(它仍然转到submitemail.php文件与成功消息，而不是在#error中显示消息。 - Justine 39 分钟前

如果发生这种情况，这意味着连接到提交事件didnt与

return false;

结束这个函数我给ajaxForm beleive这是自动完成的，这样意味着在你的代码中的错误的地方。如果你没有安装萤火虫，安装它，并留意在控制台上确保：

jQuery是加载OK
没有 errrors建立AJAX 互动或在任何其他JS页面可能会阻止它

来源

2009-12-03 21:11:12 prodigitalson

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

回答

相关问题