Falah Al Fitri
Posted on December 16, 2019
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++" selected >C++</option>
<option value="java" >Java</option>
<option value="javascript" selected >Javascript</option>
<option value="php" >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" />
</form>
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>
process.php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
Demo repl.it
💖 💪 🙅 🚩
Falah Al Fitri
Posted on December 16, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
php PHP jQuery form formData 45: input text textarea select-multiple using ajax ($.ajax)
December 16, 2019