如何使用AJAX提交此表單而不使用jQuery，但是使用純Javascript

Question

我看了全部，我能找到的所有內容都是關於jQuery的。在這裏，我有很多偉大的思想幫助，我終於得到了我的表單驗證（現在只是客戶端，但因爲它是一個任務）。我現在需要使用AJAX將表單提交給PHP文件。

我的要求是驗證它是通過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>'; 
} 
} 
?> 

的感謝！

Answer 1

這裏是你如何通過Ajax提交表單：

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

這個例子是使用GET，但你也可以使用POST：

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

注：

您必須致電submitFormAjax()validateFormOnSubmit後，沒有錯誤做了，在這裏：

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