How to in HTML5: Use the FormData object in XHR2
Join the DZone community and get the full member experience.Join For Free
var formObject = new FormData(); formObject.append("element_1","Sagar"); formObject.append("element_2","Ganatra"); var xhrObject = new XMLHttpRequest(); xhrObject.open("POST","postform.cfm"); xhrObject.send(formObject);This means that, one need not add the form element to the document and can avoid using hidden input element (type="hidden") to send the additional key-value data to the server for processing.
It is also possible to add additional data to an already existing form in the document and send the form data to the server:
var docFormElement = document.getElementById('myForm'); var docFormData = new FormData(docFormElement); docFormData.append("product_license","Enterprise"); var xhrObject = new XMLHttpRequest(); xhrObject.open("POST","postform.cfm"); xhrObject.send(docFormData); <form id="myForm"> <input name="product_name" type="text" value="ColdFusion" /> <input name="product_codename" type="text" value="Zeus" /> </form>The FormData constructor takes the form element as an argument and then the append function is used to add another key-value data to the FormData object.
Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.