XMLHttpRequest to Post HTML Form

by

The POST string format is the following:

name=value&name2=value2&name3=value3

So you have to grab all names, their values and put them into that format.
You can either iterate all input elements or get specific ones by calling document.getElementById().

Warning: You have to use encodeURIComponent() for all names and especially for the values so that possible & contained in the strings do not break the format.

Example:

var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);

request.send("action=dosomething&" + input.name + "=" + inputData);

Another far simpler option would be to use FormData objects. Such an object can hold name and value pairs.

Luckily, we can construct a FormData object from an existing form and we can send it it directly to XMLHttpRequest‘s method send():

var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);

More Related Contents:

  1. Send POST data using XMLHttpRequest
  2. jQuery AJAX submit form
  3. Origin is not allowed by Access-Control-Allow-Origin
  4. Submit form without page reloading
  5. Prevent double submission of forms in jQuery
  6. Add a “hook” to all AJAX requests on a page
  7. What is the cleanest way to get the progress of JQuery ajax request?
  8. jQuery has deprecated synchronous XMLHTTPRequest
  9. XMLHttpRequest status 0 (responseText is empty)
  10. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  11. Is onload equal to readyState==4 in XMLHttpRequest?
  12. How to upload a file using jQuery.ajax and FormData
  13. How can I send the “&” (ampersand) character via AJAX?
  14. Want HTML form submit to do nothing
  15. What do the different readystates in XMLHttpRequest mean, and how can I use them?
  16. Empty responseText from XMLHttpRequest
  17. WebKit “Refused to set unsafe header ‘content-length'”
  18. Simple ajax form using javascript no jQuery
  19. Intercept fetch() API requests and responses in JavaScript
  20. Javascript: Overriding XMLHttpRequest.open()
  21. Get HTML code using JavaScript with a URL
  22. Is it possible for XHR HEAD requests to not follow redirects (301 302)
  23. XmlHttpRequest onprogress interval
  24. Overriding XMLHttpRequest.open()
  25. XMLHttpRequest 206 Partial Content
  26. Ajax – 500 Internal Server Error
  27. IE10/IE11 Abort Post Ajax Request After Clearing Cache with error “Network Error 0x2ef3”
  28. Opinion about synchronous requests in web workers
  29. Intercept XMLHttpRequest and modify responseText
  30. XmlHttpRequest.responseText while loading (readyState==3) in Chrome

Leave a Comment