PHP jQuery form formData 40: input text textarea select using ajax ($.ajax)
Tags: php, jquery, form, ajax
Published: 2019-12-16 09:11:23

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

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

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

<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-40" >Editor</a></li>
  <li><a href="https://jquery-form-formdata-40.antelove19.repl.co/" >Live</a></li>
</ul>

<hr/>

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

<hr/>