Javascript Code How to Use FormData to Submit Form via Ajax

Javascript Code How to Use FormData to Submit Form via Ajax without Having to Refresh the Web Page on Form Submit

How to submit a form using ajax, which sends the forms data to the server in the background, without refreshing the web page.

const frm = document.querySelector("#id-of-form"); frm.onsubmit = async(e) => { // prevent submission of the form the normal way with page refresh e.preventDefault(); let response = await fetch('/path/to-form-processor-php-code.php', { method: 'POST', body: new FormData(frm) }); if(response.ok){ // if HTTP-status is 200-299 // php code will process the submitted form // data and return whatever the php code decides let result = await response.json(); // [result] contains the server response console.log(result); /* you can have php return javascript code. You can then create a function on the fly and run that JS code like this ... let js = new Function(result); js(); */ } //=> if(response.ok) };

Looping Throught and Viewing FormData

const frm = document.querySelector("#id-of-form"); let data = new FormData(frm); for (const [key, value] of data) { console.log(key, value); }

FormData Methods

• formData.append(name, value) – add a form field with the given name and value.
• formData.append(name, blob, fileName) – add a field as if it were <input type="file">, the third argument fileName sets file name (not form field name), as it were a name of the file in user’s filesystem.
• formData.delete(name) – remove the field with the given name.
• formData.get(name) – get the value of the field with the given name.
• formData.has(name) – if there exists a field with the given name, returns true, otherwise false.