index.php
<form method="post" action="process.php" enctype="multipart/form-data" >
Firstname: <input type="text" name="firstname" />
<br />
Lastname: <input type="text" name="lastname" />
<br />
Description: <textarea name="description" rows="10" cols="50" ></textarea>
<br />
Gender:
<input type="radio" name="gender" value="male" checked /> Male
<input type="radio" name="gender" value="female" /> Female
<br />
Programming Language (single):
<select name="language" >
<option value="c" >C</option>
<option value="c++" >C++</option>
<option value="java" >Java</option>
<option value="javascript" selected >Javascript</option>
<option value="php" >PHP</option>
</select>
<br />
Programming Languages (multiple): (hold ctrl + click item)
<select name="languages[]" multiple >
<option value="c" >C</option>
<option value="c++" >C++</option>
<option value="java" >Java</option>
<option value="javascript" selected >Javascript</option>
<option value="php" selected >PHP</option>
</select>
<br />
Hobby (single): <input type="checkbox" name="hobby" value="studying" /> Studying
<br />
Hobbies (multiple):
<input type="checkbox" name="hobbies[]" value="studying" /> Studying
<input type="checkbox" name="hobbies[]" value="reading" checked /> Reading
<input type="checkbox" name="hobbies[]" value="writing" /> Writing
<input type="checkbox" name="hobbies[]" value="sleeping" checked /> Sleeping
<br />
File Upload: <input type="file" name="upload" /><br />
Preview: <img src="#" />
<br />
<hr />
<input type="submit" value="Submit" />
<hr />
display result form server
<div id="output"></div>
get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output")
<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>
ajax function
<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>
add onchange event in input with file type, then display it with img tag
<script>
/* preview image */
document.querySelector( "input[type='file']" ).addEventListener( "change", function () {
var preview = document.querySelector( "img" );
var file = document.querySelector( "input[type='file']" ).files[0];
var reader = new FileReader();
reader.addEventListener( "load", function () {
preview.height = 100;
preview.title = file.name;
preview.src = reader.result;
}, false );
if (file)
{
reader.readAsDataURL(file);
}
console.log( reader );
} );
</script>
process.php
$data = array(
"post" => $_POST,
"files" => $_FILES
);
echo "<pre>";
var_dump($data);
echo "</pre>";
Demo repl.it
Top comments (0)