Как отправить эту форму с помощью AJAX без jQuery, но чистый Javascript

Я посмотрел на все, и все, что я мог найти, было о jQuery.

С большой помощью от великих умов здесь, в SO, я наконец получил свою форму проверки (это только клиентская сторона прямо сейчас, но это потому, что это назначение). Мне нужно отправить форму в файл PHP с помощью AJAX.

• Как добавить php-содержимое или переменную в поле предупреждения javascript ?! javascript, php, alertbox
• Отправить несколько значений из ajax в php в URL с помощью GET
• Обнаружение, если два окна браузера открыты для одного и того же сайта
• Как проверить, изменилось ли значение объекта JSON при захвате нового запроса
• Как передать переменные и данные с PHP на JavaScript?

Мои требования – проверить, что он был вызван через AJAX, проверить, что все обязательные поля имеют значения и вернуть статус успеха, включая время сервера, которое было обработано.

JSfiddle

Действие формы пустое сейчас для тестирования, но в конечном итоге вызовет form.php с приведенным ниже кодом.

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

благодаря!

 function submitFormAjax() { var xmlhttp= window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) alert(xmlhttp.responseText); // Here is the response } var name = document.getElementById('name').innerHTML; var email = document.getElementById('email').innerHTML; xmlhttp.open("GET","your_url.php?name=" + name + "&email=" + email, true); xmlhttp.send(); } 

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

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