PHP Javascript form formData 45: input text textarea select-multiple using ajax (XMLHttpRequest)

<form method="post" action="process.php" > Firstname: <input type="text" name="firstname" /> <br /> Lastname: <input type="text" name="lastname" /> <br /> Description: <textarea name="description" rows="10" cols="50" ></textarea>  <br /> Programming Languages (multiple): (hold ctrl + click item) <select name="languages[]" multiple > <option value="c" >C</option>  <option value="c++" selected >C++</option>  <option value="java" >Java</option>  <option value="javascript" selected >Javascript</option>  <option value="php" >PHP</option>  </select>  <br /> <hr /> <input type="submit" value="Submit" /> </form> 

<div id="output"></div> 

<script> /* submit form */ document.querySelector( "form" ).addEventListener( "submit", function (event) { event.preventDefault(); // return false var formHTML = event.target; // this console.log( formHTML ); // formHTML element // https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects var formData = new FormData( formHTML ); console.log( formData ); // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest // https://www.w3schools.com/xml/xml_http.asp // https://www.w3schools.com/js/js_ajax_http.asp /* AJAX request */ ajax( formHTML, formData, "#output" ); // ajax( form, data destination ) }); </script> 

<script> function ajax( form, data, destination ) { if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); /* code for modern browsers */ } else { var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */ } xhr.open( form.method, form.action, true ); // ( "post", "process.php", true ) xhr.send( data ); xhr.onreadystatechange = function () { if ( this.readyState == 4 && this.status == 200 ) { document.querySelector( destination ).innerHTML = this.responseText; } }; } </script> 

echo "<pre>"; var_dump($_POST); echo "</pre>";