How to submit this form using AJAX without jQuery but pure Javascript

ajax, forms, javascript, php, validation

Solution

Here is how you can submit your form via `Ajax`:

function submitFormAjax() {
    let xmlhttp= window.XMLHttpRequest ?
        new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200)
            alert(this.responseText); // Here is the response
    }

    let name = document.getElementById('name').innerHTML;
    let email = document.getElementById('email').innerHTML;

    xmlhttp.open("GET","your_url.php?name=" + name + "&email=" + email, true);
    xmlhttp.send();
}

This example is using `GET`, but you could also use `POST`:

xmlhttp.open("POST","your_url.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + name + "&email=" + email);

Note:

You must call `submitFormAjax()` after `validateFormOnSubmit` is done with no errors, here:

if (reason.length == 0) {
    // Show some loading image and submit form
    submitFormAjax();
} else {
    return false;
}

Problem

I looked all over and all I could find was about jQuery. With much help from the great minds here at SO I've finally got my form validating (it's only client side right now, but that because it's an assignment). I need to now submit the form to a PHP file using AJAX. My requirements are to verify that it was called via AJAX, verify all required fields have values and return a success status including the server time it was processed. JSfiddle The form action is empty right now for testing but will eventually call form.php with the code below. HTML ``` <form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post"> <div> <label>First Name</label> <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus /> <div id="name-error" class="error"></div> </div> <div> <label>Nickname</label> <input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus /> </div> <div> <label>Email</label> <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus /> <div id="email-error" class="error"></div> </div> <div> <label>Phone</label> <input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus /> <div id="phone-error" class="error"></div> </div> <div> <label>I prefer</label> <input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs <input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats <input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither <div id="pet-error" class="error"></div> </div> <div> <label>My favorite number between 1 and 50</label> <input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus /> <div id="number-error" class="error"></div> </div> <div> <label>Disclaimer</label> <input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true. <div id="disclaimer-error" class="error"></div> </div> <div> <button type="submit" name="submit" id="submit" tabindex="10">Send</button> </div> </form> ``` JS ``` function validateFormOnSubmit(contact) { reason = ""; reason += validateName(contact.name); reason += validateEmail(contact.email); reason += validatePhone(contact.phone); reason += validatePet(contact.pet); reason += validateNumber(contact.number); reason += validateDisclaimer(contact.disclaimer); console.log(reason); if (reason.length > 0) { return false; } else { return false; } } // validate required fields function validateName(name) { var error = ""; if (name.value.length == 0) { name.style.background = 'Red'; document.getElementById('name-error').innerHTML = "The required field has not been filled in"; var error = "1"; } else { name.style.background = 'White'; document.getElementById('name-error').innerHTML = ''; } return error; } // validate email as required field and format function trim(s) { return s.replace(/^\s+|\s+$/, ''); } function validateEmail(email) { var error = ""; var temail = trim(email.value); // value of field with whitespace trimmed off var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/; var illegalChars = /[\<\>\,\;\:\\\"\[\]]/; if (email.value == "") { email.style.background = 'Red'; document.getElementById('email-error').innerHTML = "Please enter an email address."; var error = "2"; } else if (!emailFilter.test(temail)) { //test email for illegal characters email.style.background = 'Red'; document.getElementById('email-error').innerHTML = "Please enter a valid email address."; var error = "3"; } else if (email.value.match(illegalChars)) { email.style.background = 'Red'; var error = "4"; document.getElementById('email-error').innerHTML = "Email contains invalid characters."; } else { email.style.background = 'White'; document.getElementById('email-error').innerHTML = ''; } return error; } // validate phone for required and format function validatePhone(phone) { var error = ""; var stripped = phone.value.replace(/[\.\-\ ]/g, ''); if (phone.value == "") { document.getElementById('phone-error').innerHTML = "Please enter a phone number"; phone.style.background = 'Red'; var error = '6'; } else if (isNaN(parseInt(stripped))) { var error = "5"; document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters."; phone.style.background = 'Red'; } else if (stripped.length < 10) { var error = "6"; document.getElementById('phone-error').innerHTML = "The phone number is too short."; phone.style.background = 'Red'; } else { phone.style.background = 'White'; document.getElementById('phone-error').innerHTML = ''; } return error; } function validatePet(pet) { if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) { document.getElementById('pet-error').innerHTML = "Pet required"; var error = "2"; } else { document.getElementById('pet-error').innerHTML = ''; } return error; } function validateNumber(number) { var num = document.forms["contact"]["number"]; var y = num.value; if (!isNaN(y)) { //alert('va'); if (y < 0 || y > 50) { //Wrong number.style.background = 'Red'; document.getElementById("number-error").innerHTML = "Must be between 0 and 50."; var error = "10"; } else { //Correct number.style.background = 'White'; document.getElementById("number-error").innerHTML = ""; } return error; } else { document.getElementById("number-error").innerHTML = "Must be a number."; var error = "3"; } return error; } function validateDisclaimer(disclaimer) { var error = ""; if (document.getElementById("disclaimer").checked === false) { document.getElementById('disclaimer-error').innerHTML = "Required"; var error = "4"; } else { document.getElementById('disclaimer-error').innerHTML = ''; } return error; } ``` PHP ``` <?php $name = $_POST['name']; $email = $_POST['email']; $from = 'From: TangledDemo'; $to = 'myemail@domain.com'; $subject = 'Hello'; $message = "This is a message."; if ($_POST['submit']) { if (mail ($to, $subject, $message)) { echo '<p>Your message has been sent!</p>'; } else { echo '<p>Something went wrong, go back and try again!</p>'; } } ?> ``` thanks!

Original source