title: How to add a number of selected items and total price to an email form. Shopping cart
body: <p>Good morning got a problem and I am have enought of thinking how to put that together so I am asking for your help. Here is a code that I am using. I want put together these 2 codes and add a total price and selected items from cart to an send e-mail. No payments just, want to send an e-mail that will include text + total price + items selected in cart.</p>
  <p>1.</p>
  <pre><code>    window.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  
    var form = document.getElementById(&quot;my-form&quot;);
    var status = document.getElementById(&quot;status&quot;);
  
    function success() {
      form.reset();
      status.classList.add(&quot;success&quot;);
      status.innerHTML = &quot;Thanks!&quot;;
    }
  
    function error() {
      status.classList.add(&quot;error&quot;);
      status.innerHTML = &quot;Oops! There was a problem.&quot;;
    }
  
    form.addEventListener(&quot;submit&quot;, function (ev) {
      ev.preventDefault();
      var data = new FormData(form);
      ajax(form.method, form.action, data, success, error);
    });
  });
  
  
  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader(&quot;Accept&quot;, &quot;application/json&quot;);
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }
  </code></pre>
  <ol start="2">
  <li></li>
  </ol>
  <pre><code>    if (document.readyState == 'loading') {
      document.addEventListener('DOMContentLoaded', ready)
  } else {
      ready()
  }
  function ready() {
      var removeCartItemButtons = document.getElementsByClassName('btn-danger')
      for (var i = 0; i &lt; removeCartItemButtons.length; i++) {
          var button = removeCartItemButtons[i]
          button.addEventListener('click', removeCartItem)
      }
      var quantityInputs = document.getElementsByClassName('cart-quantity-input')
      for (var i = 0; i &lt; quantityInputs.length; i++) {
          var input = quantityInputs[i]
          input.addEventListener('change', quantityChanged)
      }
      var addToCartButtons = document.getElementsByClassName('shop-item-button')
      for (var i = 0; i &lt; addToCartButtons.length; i++) {
          var button = addToCartButtons[i]
          button.addEventListener('click', addToCartClicked)
      }
  
      document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
  }
  function purchaseClicked() {
      alert('Thank you for your purchase')
      var cartItems = document.getElementsByClassName('cart-items')[0]
      while (cartItems.hasChildNodes()) {
          cartItems.removeChild(cartItems.firstChild)
      }
      updateCartTotal()
  }
  function removeCartItem(event) {
      var buttonClicked = event.target
      buttonClicked.parentElement.parentElement.remove()
      updateCartTotal()
  }
  function quantityChanged(event) {
      var input = event.target
      if (isNaN(input.value) || input.value &lt;= 0) {
          input.value = 1
      }
      updateCartTotal()
  }
  
  function addToCartClicked(event) {
      var button = event.target
      var shopItem = button.parentElement.parentElement
      var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
      var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
      var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
      addItemToCart(title, price, imageSrc)
      updateCartTotal()
  }
  function addItemToCart(title, price, imageSrc) {
      var cartRow = document.createElement('div')
      cartRow.classList.add('cart-row')
      var cartItems = document.getElementsByClassName('cart-items')[0]
      var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
      for (var i = 0; i &lt; cartItemNames.length; i++) {
          if (cartItemNames[i].innerText == title) {
              alert('This item is already added to the cart')
              return
          }
      }
      var cartRowContents = `
          &lt;div class=&quot;cart-item cart-column&quot;&gt;
              &lt;img class=&quot;cart-item-image&quot; src=&quot;${imageSrc}&quot; width=&quot;100&quot; height=&quot;100&quot;&gt;
              &lt;span class=&quot;cart-item-title&quot;&gt;${title}&lt;/span&gt;
          &lt;/div&gt;
          &lt;span class=&quot;cart-price cart-column&quot;&gt;${price}&lt;/span&gt;
          &lt;div class=&quot;cart-quantity cart-column&quot;&gt;
              &lt;input class=&quot;cart-quantity-input&quot; type=&quot;number&quot; value=&quot;1&quot;&gt;
              &lt;button class=&quot;btn btn-danger&quot; type=&quot;button&quot;&gt;Delete&lt;/button&gt;
          &lt;/div&gt;`
      cartRow.innerHTML = cartRowContents
      cartItems.append(cartRow)
      cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
      cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
  }
  
  function updateCartTotal() {
      var cartItemContainer = document.getElementsByClassName('cart-items')[0]
      var cartRows = cartItemContainer.getElementsByClassName('cart-row')
      var total = 0
      for (var i = 0; i &lt; cartRows.length; i++) {
          var cartRow = cartRows[i]
          var priceElement = cartRow.getElementsByClassName('cart-price')[0]
          var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
          var price = parseFloat(priceElement.innerText.replace('zl', ''))
          var quantity = quantityElement.value
          total = total + (price * quantity)
      }
      total = Math.round(total * 100) / 100
      document.getElementsByClassName('cart-total-price')[0].innerText = total + 'zl'
  }
  </code></pre>
  <p>For sending an e-mail I am using formspree.io. The html site is not hosted yet and I dont really know if I can make this happen without hosting or just in JS. Please Help</p>
  <p>Kind Regards</p>