<p>The problem was resolved by changing the headers set:</p>

<pre><code>let form = new FormData(this.form);
let request = new Request('/', {
  credentials: 'include',
  method: 'post',
  mode: 'same-origin',
  redirect: 'follow',
  headers: new Headers({
    'Accept': '*/*',
    'X-Requested-With': 'XMLHttpRequest'
  }),
  body: form
});
</code></pre>

<p>Instead of declaring the Content-Type in the request, I set the encoding type on the form itself, this step is optional as the request sets as multipart/form data by default I think.</p>

<pre><code>&lt;form method="post" enctype="multipart/form-data"&gt;
..
&lt;/form&gt;
</code></pre>

CC BY-SA 3.0
2017-09-11T12:27:31.873Z
2017-09-11T12:27:31.873Z
Jai Sandhu
<p>As mentioned on Twitter, pretty sure this we will be an issue with CSRF ... Get it working first with that turned off is my advice. I have not used Fetch, though.</p>

CC BY-SA 3.0
2017-09-11T10:49:37.923Z
2017-09-11T10:49:37.923Z
Jeremy Daalder
<p>Hi this is a variation of the question asked here <a href="https://craftcms.stackexchange.com/questions/17347/update-commerce-cart-using-ajax">on updating the cart using ajax</a>, instead I'm attempting to use the Fetch API. As a test the form submits properly when submitting in the usual way without using the Fetch request. I've attempted to replicate the synchronous request header that I inspected in the Chrome Network tab but I still get a Bad Request error. </p>

<p>HTML:</p>

<pre><code>&lt;form method="POST" id="addToCartForm"&gt;
    {{ getCsrfInput() }}
    &lt;input type="hidden" name="action" value="commerce/cart/updateCart"&gt;
    &lt;input type="hidden" name="redirect" value="/cart"&gt;
    &lt;input type="hidden" name="purchasableId" value="{{ product.id }}"&gt;
    &lt;input type="number" name="qty"&gt;
&lt;/form&gt;
</code></pre>

<p>JS:</p>

<pre><code>let formElem = document.getElementById('addToCartForm');
let form = new FormData(formElem);
let request = new Request('/', {
  credentials: 'include',
  method: 'post',
  mode: 'same-origin',
  redirect: 'follow',
  headers: new Headers({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
    'X-Requested-With': 'XMLHttpRequest' // so craft detects ajax
  }),
  body: form
});

fetch(request).then((response) =&gt; {
  if(response.ok) {
    return response.text();
  }
  throw new Error('Network response was not ok.');
}).then((response) =&gt; {
  console.log('Worked:');
  console.log(response);
}).catch((error) =&gt; {
  console.log(error);
});
</code></pre>

<plugin-craftcommerce><ajax><javascript>
Update Commerce Cart using Fetch
# Update Commerce Cart using Fetch

(Asked by: username_0 on 2017-09-10)

Hi this is a variation of the question asked here on updating the cart using ajax, instead I'm attempting to use the Fetch API. As a test the form submits properly when submitting in the usual way without using the Fetch request. I've attempted to replicate the synchronous request header that I inspected in the Chrome Network tab but I still get a Bad Request error. 
HTML:

    {{ getCsrfInput() }}
    
    
    
    


JS:
let formElem = document.getElementById('addToCartForm');
let form = new FormData(formElem);
let request = new Request('/', {
  credentials: 'include',
  method: 'post',
  mode: 'same-origin',
  redirect: 'follow',
  headers: new Headers({
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
    'X-Requested-With': 'XMLHttpRequest' // so craft detects ajax
  }),
  body: form
});

fetch(request).then((response) => {
  if(response.ok) {
    return response.text();
  }
  throw new Error('Network response was not ok.');
}).then((response) => {
  console.log('Worked:');
  console.log(response);
}).catch((error) => {
  console.log(error);
});

**Tags:** plugin-craftcommerce, ajax, javascript


---

## 2 answers

### Answer by username_0 on 2017-09-11. Score: 2

The problem was resolved by changing the headers set:
let form = new FormData(this.form);
let request = new Request('/', {
  credentials: 'include',
  method: 'post',
  mode: 'same-origin',
  redirect: 'follow',
  headers: new Headers({
    'Accept': '*/*',
    'X-Requested-With': 'XMLHttpRequest'
  }),
  body: form
});

Instead of declaring the Content-Type in the request, I set the encoding type on the form itself, this step is optional as the request sets as multipart/form data by default I think.

..


---

### Answer by username_1 on 2017-09-11. Score: 1

As mentioned on Twitter, pretty sure this we will be an issue with CSRF ... Get it working first with that turned off is my advice. I have not used Fetch, though.


---

