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 />
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 />
<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>
process.php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
Demo repl.it
Top comments (0)