if (window.fetch) { document.getElementById("submit").addEventListener("click", (e) => { e.preventDefault(); fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: new FormData(document.getElementById("myForm")), }) .then((response) => response.json()) .then((json) => console.log(json)) .catch(error => console.log(error)); }); } else { document.getElementById("submit").addEventListener("click", (e) => { e.preventDefault(); let xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { let result = JSON.parse(this.responseText); console.log(result); } else if (this.readyState == 4) { console.log("can't fecth data") } } xhttp.open("POST", "https://jsonplaceholder.typicode.com/posts", true); const formData = new FormData(document.getElementById("myForm")); xhttp.send(formData); }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter