AJAX email form will not submit

Question

I have an email sign-up form on my site that I recently added validation to.

Now, the form will not send or provide an error message. When I check the inspector I see the following error:

TypeError: null is not an object (evaluating 'document.getElementById(update[0]).innerHTML = update[1]')

---

This is my contact.php file

 <?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");
}
?>

This is my form in 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>

and this is my 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>

Any insight would be greatly appreciated.

Answer 1

I think this is what you are looking for:
document.contactform.send.disabled=false;

add another div in html page with id = "msg"

replace

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

with

you can add conditions here
depending on what you want to display upload[0] or upload[1]
document.getElementById('msg').innerHTML = update[0]+update[1];

and in contact.php

there is '}' missing before else.

Answer 2

Multiple errors, client and server-side.

Changes to javascript. Your form data wasn't being sent in the php call.

I have made changes to your call type get/post and used new FormData(). If you want to add more to your call formdata.append("ParamName", Value/Variable); and use $something=$_POST['ParamName']; to get the post in PHP.

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

Changes to PHP. You missed the opening/closing of the if statements.

The way you have your javascript setup, you split the php reply (|) if the email posted wasn't valid you would cause a JS error because you didn't have the divID and bar(|) in your echo.

$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  (}) 

I hope I have covered all your problems in this answer.

If you don't understand anything please leave a comment below, i will update the answer to help you understand anything within this answer. I would rather you take this source code understand it, not just a copy paste. You won't learn from copy/paste.

Tip: Clean your php string before putting them into mail().

I hope this helps. Happy coding!