AJAX电子邮件表单不会提交

时间:2015-03-02 23:18:27

标签: javascript php ajax forms validation

我的网站上有一个电子邮件注册表单,我最近添加了验证。

现在,表单不会发送或提供错误消息。当我检查检查员时,我看到以下错误:

  

TypeError:null不是对象(评估'document.getElementById(update [0])。innerHTML = update [1]')


这是我的contact.php文件

 <?php
$to = "hello@interzonestudio.com";
$subject_prefix = ""; 

if(!isset($_GET['action']))

$subject = "Newsletter Sign Up"; //The senders subject
$message = trim($_GET['email']); //The senders subject
$email = trim($_GET['email']); //The senders email address

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {

mail($to,$subject,$message,"From: ".$email."");

echo 'contactarea|<div id="thanks">Thank you. We promise you won’t regret it.</div>';

else {
  echo("$email is not a valid email address");
}
?>

这是我的HTML格式

<div id="contactarea">
    <span style="font-family: 'Old Standard TT', serif;">Newsletter</span>
    <form id="contactform" name="contactform" >
        <input class ="email" type="text" name="email" id="inputbox" value="E-Mail"
onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
        <input type="submit" value="Submit" name="send" onclick="sendemail(); return false; " class="signup" >
        </form>
    </div>

这是我的javascript

<script language="javascript">
    function createRequestObject() {
        var ro;
        var browser = navigator.appName;
        if (browser == "Microsoft Internet Explorer") {
            ro = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            ro = new XMLHttpRequest();
        }
        return ro;
    }
    var http = createRequestObject();

    function sendemail() {
        var email = document.contactform.email.value;
        document.contactform.send.disabled = true;
        http.open('get', 'contact.php?email=' + email + '&action=send');
        http.onreadystatechange = handleResponse;
        http.send(null);

        setTimeout(function() {
            jQuery(document).find("#thanks").fadeOut();
        }, 3000);

    }

    function handleResponse() {
        if (http.readyState == 4) {
            var response = http.responseText;
            var update = new Array();
            if (response.indexOf('|' != -1)) {
                update = response.split('|');
                document.getElementById(update[0]).innerHTML = update[1];
            }
        }
    }
</script>

非常感谢任何见解。

2 个答案:

答案 0 :(得分:0)

我认为这就是你要找的东西:
document.contactform.send.disabled = FALSE;

在html页面中添加另一个div,其中id =&#34; msg&#34;

更换

document.getElementById(update [0])。innerHTML = update [1];



你可以在这里添加条件
取决于您要显示的内容[0]或上传[1]
document.getElementById(&#39; msg&#39;)。innerHTML = update [0] + update [1];

并在contact.php中

有&#39;}&#39;在其他地方失踪。

答案 1 :(得分:0)

多个错误,客户端和服务器端。

  

对javascript的更改。您的表单数据未在php调用中发送。

我更改了您的调用类型get / post并使用了新的FormData()。如果您想为通话formdata.append("ParamName", Value/Variable);添加更多内容并使用$something=$_POST['ParamName'];来获取PHP中的帖子。

var formdata = new FormData();
formdata.append("email", email);
formdata.append("action", "send");
http.open('POST', 'contact.php');
http.onreadystatechange = handleResponse;
http.send(formdata);
  

对PHP的更改。你错过了if语句的开启/关闭。

你的javascript设置的方式,你拆分php回复(|)如果发布的电子邮件无效你会导致JS错误,因为你的回声中没有divID和bar(|)。

$to = "hello@interzonestudio.com";
$subject_prefix = ""; 
if(isset($_POST['action'])){ // ***** Missing ({) 
$subject = "Newsletter Sign Up"; //The senders subject
$message = trim($_POST['email']); //The senders subject
$email = trim($_POST['email']); //The senders email address
if (!filter_var($email, FILTER_VALIDATE_EMAIL)===false) {
mail($to,$subject,$message,"From: ".$email."");
// **** Div ID Missing with Bar (contactarea|)
echo 'contactarea|<div id="thanks">Thank you. We promise you won\'t regret it.</div>';
// **** Else missing (})
}else {
  echo("contactarea|$email is not a valid email address");
}
}// **** Close if issset  (}) 

我希望我在这个答案中涵盖了你所有的问题。

如果您不明白,请在下面留言,我会更新答案,以帮助您理解本答案中的任何内容。我宁愿你把这个源代码理解它,而不仅仅是复制粘贴。您不会从复制/粘贴中学习。

  

Tip: 在将它们放入mail()之前清理你的php字符串。

我希望这会有所帮助。快乐的编码!