title: Sending information in form using MAMP
body: <p>I am following a tutorial and trying to send information in a form using MAMP because I need to simulate a client-server behaviour, and it's not working. I've copied the code from the tutorial, so there should be no errors in the code, but it's still not working.</p>
  <p>What's supposed to happen: the contact information you type in the code should be sent to the server.</p>
  <p>What actually happens: the information gets added to the URL. Also, the page refreshes even though I have used <code>preventDefault</code>.</p>
  <p>Here is the code: <br>
  <strong>js:</strong></p>
  <pre><code>   const forms = document.querySelectorAll('form');
          const message = {
              loading: 'img/form/spinner.svg',
              success: 'Спасибо! Скоро мы с вами свяжемся',
              failure: 'Что-то пошло не так...'
          };
      
          forms.forEach(item =&gt; {
              postData(item);
          });
      
          function postData(form) {
              form.addEventListener('submit', function (event){
                  event.preventDefault();
                  event.stopPropagation();
      
                  let statusMessage = document.createElement('img');
                  statusMessage.src = message.loading;
                  statusMessage.style.cssText = `
                      display: block;
                      margin: 0 auto;
                  `;
                  form.insertAdjacentElement('afterend', statusMessage);
              
                  const formData = new FormData(form);
      
                  const object = {};
                  formData.forEach(function(value, key){
                      object[key] = value;
                  });
      
                  fetch('server.php', {
                      method: 'POST',
                      headers: {
                          'Content-Type': 'application/json'
                      },
                      body: JSON.stringify(object)
                  }).then(data =&gt; {
                      console.log(data);
                      showThanksModal(message.success);
                      statusMessage.remove();
                  }).catch(() =&gt; {
                      showThanksModal(message.failure);
                  }).finally(() =&gt; {
                      form.reset();
                  });
              });
          }
      
          function showThanksModal(message) {
              const prevModalDialog = document.querySelector('.modal__dialog');
      
              prevModalDialog.classList.add('hide');
              openModal();
      
              const thanksModal = document.createElement('div');
              thanksModal.classList.add('modal__dialog');
              thanksModal.innerHTML = `
                  &lt;div class=&quot;modal__content&quot;&gt;
                      &lt;div class=&quot;modal__close&quot; data-close&gt;×&lt;/div&gt;
                      &lt;div class=&quot;modal__title&quot;&gt;${message}&lt;/div&gt;
                  &lt;/div&gt;
              `;
              document.querySelector('.modal').append(thanksModal);
              setTimeout(() =&gt; {
                  thanksModal.remove();
                  prevModalDialog.classList.add('show');
                  prevModalDialog.classList.remove('hide');
                  closeModal();
              }, 4000);
          }
  </code></pre>
  <p><strong>PHP:</strong></p>
  <pre><code>&lt;?php
  $_POST = json_decode( file_get_contents(&quot;php://input&quot;), true );
  echo var_dump($_POST);
  </code></pre>
  <p>Can anybody please tell me what the problem is?</p>