PHP jQuery form formData 60: input text textarea file using ajax ($.ajax)
Tags: php, jquery, form, ajax
Published: 2019-12-16 13:04:01

<hr />

<center>Happy Coding</center>

<hr />

index.php

		<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 />

			File Upload: <input type="file" name="upload" /><br />
			Preview: <img src="#" />
			<br />

			<hr />

			<input type="submit" value="Submit" />

		</form>

		<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 */

			// https://api.jquery.com/jquery.each/
			/*
			 *	array.each( function( index, element ) )
			 *	$.each( array, callback )
			 */

			// https://www.w3schools.com/jquery/misc_each.asp

			/* get all form */
			$( "form" ).each( function () {

				/* each form add onsubmit event */
				$( this ).bind( "submit", function (event) {

					event.preventDefault(); // return false


					var formHTML = event.target; // $( this ) => not work !!

					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://api.jquery.com/jquery.ajax/
					// https://www.w3schools.com/jquery/ajax_ajax.asp
					// https://www.w3schools.com/jquery/jquery_ref_ajax.asp

					/* AJAX request */
					ajax( formHTML, formData, "#output" ); // ajax( form, data, destination )

				} );

			});

		</script>

ajax function

		<script>

			function ajax( form, data, destination )
			{

				$.ajax({

					method: form.method,
					url: form.action,

					data: data,

					/*
						result type data
						JSON.parse(data)
						http://api.jquery.com/jQuery.ajax/
						https://stackoverflow.com/questions/14322984/differences-between-contenttype-and-datatype-in-jquery-ajax-function
						https://forums.asp.net/t/2087039.aspx?what+is+difference+between+dataType+and+contentType+in+jquery
					*/
					dataType: "HTML",

					/* formData */
					contentType: false, // formData with $_POST or $_FILES in server (PHP)
					processData: false

				})

				/* handle success */
				.done( function(result) {

					$( destination ).html( result );

					console.log(result);

				} )

				/* handle error */
				.fail( function(error) {

					alert("Cannot Set Data!");

					console.error(error);

				} );

			}

		</script>

add onchange event in input with file type, then display it with img tag

		<script>

			/* preview image */
			$( "input[type='file']" ).on( "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

    echo "<pre>";

    var_dump($_POST);

    echo "</pre>";

<hr />

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

<ul>
  <li><a href="https://repl.it/@antelove19/jQuery-form-formData-60" >Editor</a></li>
  <li><a href="https://jquery-form-formdata-60.antelove19.repl.co/" >Live</a></li>
</ul>

<hr/>

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

<hr/>