PHP Javascript form formData 70: complete using ajax (XMLHttpRequest)
Tags: php, javascript, form, xmlhttprequest
Published: 2019-12-15 15:15:41

<hr />

<center>Happy Coding</center>

<hr />

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>

<hr />

process.php

    $data = array(
        "post"  => $_POST,
        "files" => $_FILES
    );

    echo "<pre>";

    var_dump($data);

    echo "</pre>";

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/Javascript-form-formData-70" >Editor</a></li>
  <li><a href="https://Javascript-form-formData-70.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>