title: form submitting 0 to database
body: <p>I have an html form with item and amount entries and I want the values in them to be stored in local storage and xampp, I have succeeded in submiting to localstorage however the form submits nothing in xampp in a column for item and 0 in the column of amount
  here is my html file</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
  &lt;title&gt;ICT specialists&lt;/title&gt;
  &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;app.css&quot; /&gt;
  &lt;link rel=&quot;shortcut icon&quot; href=&quot;ICT_Logo-01.png&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;h2&gt;Daily transactions at ICT specialists&lt;/h2&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;h4&gt;Your balance&lt;/h4&gt;
          &lt;h1 id=&quot;balance&quot;&gt;&lt;/h1&gt;
          &lt;div class=&quot;inc-exp-container&quot;&gt;
          &lt;div&gt;
              &lt;h4&gt;income&lt;/h4&gt;
              &lt;p id=&quot;money-plus&quot; class=&quot;money plus&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h4&gt;expense&lt;/h4&gt;
              &lt;p id=&quot;money-minus&quot; class=&quot;money minus&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;h3&gt;History&lt;/h3&gt;
      &lt;div class=&quot;shows&quot;&gt;
          &lt;ion-icon name=&quot;menu-outline&quot; id=&quot;showLi&quot;&gt;&lt;/ion-icon&gt;
          &lt;ion-icon name=&quot;close-outline&quot; id=&quot;hideLi&quot;&gt;&lt;/ion-icon&gt;
      &lt;/div&gt;
      &lt;ul id=&quot;list&quot; class=&quot;list&quot;&gt;&lt;/ul&gt;
      &lt;h3&gt;add new transation&lt;/h3&gt;
      &lt;form action=&quot;sales.php&quot; method=&quot;post&quot; id=&quot;form&quot;&gt;
          &lt;div class=&quot;form-control&quot;&gt;
              &lt;label for=&quot;&quot;&gt;date&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;date&quot; name=&quot;date&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-control&quot;&gt;
              &lt;label for=&quot;text&quot;&gt;item&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;text&quot; name=&quot;item&quot; placeholder=&quot;please enter the item...&quot; autocomplete=&quot;off&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-control&quot;&gt;
              &lt;label for=&quot;amount&quot;&gt;amount &lt;br /&gt;(negative=expense, positive=income)&lt;/label&gt;
              &lt;input type=&quot;number&quot; id=&quot;amount&quot; name=&quot;amount&quot; placeholder=&quot;please enter the amount...&quot; autocomplete=&quot;off&quot; /&gt;
          &lt;/div&gt;
          &lt;button class=&quot;btn&quot; type=&quot;submit&quot;&gt;Add transation&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;footer&quot;&gt;
      &lt;div class=&quot;footerTxt&quot;&gt;copyright &amp;copy &lt;span id=&quot;dated&quot;&gt;2022&lt;/span&lt;/div&gt;
      &lt;div class=&quot;footerRyt&quot;&gt;
          &lt;a href=&quot;http://www.sydotech.com/&quot; target=&quot;_blank&quot;&gt;ict specialists | sydotech&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt;
    .footer{
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      bottom: 0;
      background: deepskyblue !important;
      padding: 10px;
      position: fixed;
    }
    .footer .footerTxt{
      font-size: 1.2rem;
      text-transform: capitalize;
      font-weight: 500;
    }
    .footer .footerRyt a{
      text-decoration: none;
      font-size: 1.4rem;
      color: #fff !important;
    }
  &lt;/style&gt;
  &lt;ion-icon name=&quot;arrow-up-outline&quot; id=&quot;icons&quot;&gt;&lt;/ion-icon&gt;
  
  &lt;script src=&quot;sales.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;module&quot; src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js&quot;&gt; 
  &lt;/script&gt;
  &lt;script nomodule src=&quot;https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>here is my php</p>
  <pre><code>&lt;?php
  $pdo = new PDO('mysql:host=localhost;port=3306;dbname=sales','root','');
  $pdo-&gt;setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  
  if($_SERVER['REQUEST_METHOD']==='POST'){
      $item = $_POST['item'];
      $amount = $_POST['amount'];
  
      $statement = $pdo-&gt;prepare(&quot;insert into transaction 
                                      (item,amount) 
                              values (:item,:amount)&quot;);
      $statement-&gt;bindValue(':item', $item );
      $statement-&gt;bindValue(':amount', $amount );
  
      $statement-&gt;execute();
      header('Location: sales.html');
  }
  </code></pre>
  <p>here is my javascript file</p>
  <pre><code>const balance = document.getElementById(&quot;balance&quot;);
  const money_plus = document.getElementById(&quot;money-plus&quot;);
  const list = document.getElementById(&quot;list&quot;);
  const form = document.getElementById(&quot;form&quot;);
  const text = document.getElementById(&quot;text&quot;);
  const amount = document.getElementById(&quot;amount&quot;);
  const money_minus = document.getElementById(&quot;money-minus&quot;);
  let showLi = document.getElementById(&quot;showLi&quot;);
  let hideLi = document.getElementById('hideLi');
  
  const localStorageTransations = JSON.parse(localStorage.getItem(&quot;transations&quot;));
  
  let transations =
  localStorage.getItem(&quot;transations&quot;) !== null ? localStorageTransations : [];
  
  //add transation
  function addTransation() {
      // e.preventDefault();
      if (text.value.trim() === &quot;&quot; || amount.value.trim() === &quot;&quot;) {
          text.placeholder = &quot;PLEASE SOME TEXT&quot;;
          text.style.backgroundColor = &quot;#ccc&quot;;
          text.style.fontWeight = 'bold';
          amount.placeholder = &quot;ENTER AMOUNT&quot;;
          amount.style.backgroundColor = &quot;#ccc&quot;;
          amount.style.fontWeight = 'bold';
      } else {
          const transation = {
              id: genenrateID(),
              text: text.value,
              amount: +amount.value,
          };
          transations.push(transation);
          addTransationDOM(transation);
          updateValues();
          updateLocalStorage();
          text.value = &quot;&quot;;
          amount.value = &quot;&quot;;
      }
  }
  //generate id
  function genenrateID() {
      return Math.floor(Math.random() * 100000000);
  }
  //add transations to dom list
  function addTransationDOM(transation) {
      //get sign
      const sign = transation.amount &lt; 0 ? &quot;-&quot; : &quot;+&quot;;
      const item = document.createElement(&quot;li&quot;);
      //add class based on value
      item.classList.add(transation.amount &lt; 0 ? &quot;minus&quot; : &quot;plus&quot;);
      item.innerHTML = `${transation.text} &lt;span&gt;${sign}${Math.abs(transation.amount)}&lt;/span&gt; 
          &lt;button class=&quot;delete-btn&quot; onclick=&quot;removeTransation(${transation.id})&quot;&gt;x&lt;/button&gt;`;
      list.appendChild(item);
      item.style.display=&quot;none&quot;;
      hideLi.addEventListener('click',()=&gt;{
          item.style.display = 'none';
          hideLi.style.display = &quot;none&quot;;
          showLi.style.display = &quot;block&quot;;
      });
      showLi.addEventListener('click',()=&gt;{
          item.style.display = 'block';
          hideLi.style.display = &quot;block&quot;;
          showLi.style.display = &quot;none&quot;;
      })
  }
  // ********hide list******
  
  
  // ********hide list end******
  //update the balance
  function updateValues() {
      const amounts = transations.map((transation) =&gt; transation.amount);
      const total = amounts.reduce((acc, item) =&gt; (acc += item), 0).toFixed(0);
      const income = amounts
      .filter((item) =&gt; item &gt; 0)
      .reduce((acc, item) =&gt; (acc += item), 0)
      .toFixed(0);
      const expense = (
          amounts.filter((item) =&gt; item &lt; 0).reduce((acc, item) =&gt; (acc += item), 0) * -1).toFixed(0);
  
      balance.innerText = `UgShs: ${total}`;
      money_plus.innerText = `UgShs: ${income}`;
      money_minus.innerText = `UgShs: ${expense}`;
  }
  
  //remove
  function removeTransation(id) {
      transations = transations.filter((transation) =&gt; transation.id !== id); 
      updateLocalStorage();
      init();
  }
  
  //updatelocal storage
  function updateLocalStorage() {
      localStorage.setItem(&quot;transations&quot;, JSON.stringify(transations));
  }
  
  function init() {
      list.innerHTML = &quot;&quot;;
      transations.forEach(addTransationDOM);
      updateValues();
  }
  
  init();
  form.addEventListener(&quot;submit&quot;, addTransation);
  // *********date calculation********
  let date =document.getElementById('date');
  date.value = new Date().toDateString();
  
  // *********ionicons*******88
  let icon = document.getElementById('icons');
  window.onscroll = ()=&gt;{
      if(window.scrollY &gt;=100){
          icon.style.display = 'block';
          icon.style.position = 'fixed';
      }else{
          icon.style.display = 'none';
      }
  }
  icon.addEventListener('click',()=&gt;{
      window.scrollTo({top:0, behavior:&quot;smooth&quot;})
  })
  
  let span11 = document.getElementById('dated');
  span11.innerHTML = new Date().getFullYear();
  </code></pre>