My JavaScript isn't working as intended, how can I correct and clean up this XHR POST request?

Question

I have the following XmlHttpRequest:

var poc = new XMLHttpRequest();
poc.open("POST", URL);
poc.setRequestHeader("CUSTOM-HEADER", extract);
poc.send();
console.log("Request sent with header");

I'm wanting to submit POST body data alongside this XmlHttpRequest. Let's say the HTTP POST request is as follows:

POST /user/updateField/1554 HTTP/1.1
Host: localhost
Connection: close
Content-Length: 142
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarytxuXi4RTyonGC5pD

------WebKitFormBoundarytxuXi4RTyonGC5pD
Content-Disposition: form-data; name="access"

winner
------WebKitFormBoundarytxuXi4RTyonGC5pD--

I can devise a HTTP Form to perform this POST request:

<html>
  <body>
  <script>history.pushState('', '', '/')</script>
    <form action="https://localhost:4442/user/updateField/1554" method="POST" enctype="multipart/form-data">
      <input type="hidden" name="access" value="winner" />
      <input type="submit" value="Submit request" />
    </form>
   <script>
   document.forms[0].submit();
  </script>
  </body>
</html>

So taking the above into account, I could devise the following XMLHttpRequest with the above Form data, as per below snippet:

function send() {
  let form = document.forms['inputform'];
  fetch(form.action, {method:'post', body: new FormData(form)});
}

send();

<form name="inputform" action="somewhere" method="post" enctype="multipart/form-data">
  <input type="hidden" name="access" value="winner" />
</form>

<!-- for PoC -->
Look: chrome console > network and click <button onclick="send()">send</button>

However, this results in the fact that HTML is required for the XmlHttpRequest to be successful. I need this same functionality to be written purely in JavaScript but I'm struggling to achieve this.

I could try doing something along these lines, although I don't think the logic, or syntax is correct here:

function submitRequest() {
  var poc = new XMLHttpRequest();
  poc.open("POST", URL); 
  poc.setRequestHeader("CUSTOM-TOKEN", extract);
  poc.document.body.innerHTML = '<html><body><script>history.pushState('', '', '/')</script><form id="dynForm" action="https://localhost:4442/user/updateField/1554" method="POST" enctype="multipart/form-data"><input type="hidden" name="access" value="winner" /><input type="submit" value="Submit request" /></form><script>document.forms[0].submit();</script></body></html>';
  document.getElementById("dynForm").submit();
  poc.send();
}

submitRequest();

Can someone please assist by writing the JavaScript in the context illustrated above? Your help will be greatly appreciated.

Thank you for your time.

check this post https://stackoverflow.com/questions/47080869/how-to-manually-create-multipart-form-data — Abhinav Kumar, Mar 02 '21 at 07:08
Hi Barmar, thanks so much for your response. Could you please demonstrate this for me? — Sarah M., Mar 02 '21 at 07:08

score 0 · Answer 1 · answered Mar 02 '21 at 07:10

Create a FormData object and add the parameter to it.

var poc = new XMLHttpRequest();
poc.open("POST", URL);
poc.setRequestHeader("CUSTOM-HEADER", extract);
var fd = new FormData();
fd.append('access', 'winner');
poc.send(fd);
console.log("Request sent with header");

Note that FormData is normally only needed when uploading files. For a single string parameter, you can use URL-encoded format.

poc.send('access=winner');

My JavaScript isn't working as intended, how can I correct and clean up this XHR POST request?

1 Answers1