title: How to create a javascript function that will remember the user input and then display summary
body: <p>I have created a form that displays user input after sumbmitting the form on a page. I need to add a fucntion that will remember a previous inputs and display on the same page.
  I used document.write to output the form results and it works but I am unable to figure out how to display the summary of all inputs. For example: yu entered order details and then click on "sumbit". It displays the input values. Then you go back and enter new data and click on submit it displays the new data. Say after filling in the form 5 times with different values i need a function that will display the total value of all 5 orders entered, for example the total value of transactions...Perhaps an array that remembers previous inputs?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
       &lt;meta charset=UTF-8"&gt;
  
  &lt;!--script area--&gt;
  
  &lt;link rel="stylesheet" type="text/CSS" href="formstyle.css"&gt;
  &lt;script src="millends.js"&gt;&lt;/script&gt;
  
  
  &lt;title&gt;
  Mill-Ends Order&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--start form--&gt;
  &lt;form method="post"&gt;
  
  &lt;fieldset&gt;
  
  &lt;h1 class="data_entry"&gt;Tickets Order&lt;/h1&gt;
  
  
  
  &lt;ul&gt;
  
  
  
  &lt;li&gt;
  
  &lt;label for="first_name"&gt;Customer Name:&lt;/label&gt;
  &lt;input type="text" id="customer_name" name="customer_name" placeholder="first name and family name" class="medium"/&gt;&lt;/br&gt;
  &lt;/li&gt;
  
  &lt;li&gt;
  &lt;label for="phone"&gt;Phone:&lt;/label&gt;
  &lt;input type="tel" id="phone" name="phone" required class="telephone"&gt;&lt;/br&gt;&lt;/br&gt;
  
  &lt;li&gt;
  &lt;label for="number_of_tickets"&gt;Number of tickets:&lt;/label&gt;
  &lt;input type="number" id="number_of_tickets" name="number_of_tickets" required class="small"/&gt;
  &lt;/li&gt;
  
  
  &lt;h3 class"address"&gt;Delivery Address&lt;/h3&gt;
  &lt;li&gt;
  &lt;label for="street_name"&gt;Street:&lt;/label&gt;
  &lt;input type="text" id="street_name" name="street_name" required placeholder="e.g. 111 Smith St" class="large"/&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;label for="city"&gt;City:&lt;/label&gt;
  &lt;input type="text" id="city" name="city" class="medium"/&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;label for="state"&gt;State:(e.g.VIC)&lt;/label&gt;
  &lt;input type="text" id="state" name="state" required placeholder="XXX" maxlength="3" size="3" class="three" /&gt;
  &lt;/li&gt;
  
  &lt;li&gt;
  &lt;label for="post_code"&gt;Postcode:&lt;/label&gt;
  &lt;input type="text" id="post_code" name="post_code" required placeholder="XXXX" maxlength="4" class="four"/&gt;
  &lt;/li&gt;
  
  
  
  &lt;li&gt;
  &lt;label for="distance"&gt;Distance from Depot(in kms)&lt;/label&gt;
  &lt;input type="number" id="distance" name="distance" required class="howfar"/&gt;&lt;br&gt;&lt;br&gt;
  &lt;/li&gt;
  
  
  &lt;button class="reset" type="reset" id="clear"&gt;Clear Form&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  
  
  &lt;button onclick="go()"&gt;Create Order&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;button onclick="summary()"&gt;Daily Sales Summary&lt;/button&gt;
  
  
  &lt;/form&gt;
  
  
  &lt;/body&gt;
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>function go()
  
          {
  
  
  
  
  //form fields start here:
  
  
          var customer_name = document.getElementById('customer_name').value;
      var phone=document.getElementById('phone').value;
          var street_name=document.getElementById('street_name').value;
      var city=document.getElementById('city').value;
      var state=document.getElementById('state').value;
      var post_code=document.getElementById('post_code').value;
          var distance=document.getElementById('distance').value;
      var number_of_tickets=document.getElementById('number_of_tickets').value;
      var cost_per_ticket=15.20;
      var total_cost_without_gst=cost_per_ticket*number_of_tickets;
      var total_cost_with_gst=(total_cost_without_gst*0.10)+total_cost_without_gst;
      var close_delivery=20;
      var far_delivery=35;
          var close_total=close_delivery+total_cost_with_gst;
          var far_total=far_delivery+total_cost_with_gst;
  
  
      var currentDate = new Date()
      var day = currentDate.getDate()
      var month = currentDate.getMonth() + 1
      var year = currentDate.getFullYear()
      var currentTime = new Date()
      var hours = currentTime.getHours()
      var minutes = currentTime.getMinutes()
  
      if (minutes &lt; 10)
      minutes = "0" + minutes
  
  
            if (customer_name=="")
  {
  alert("Error: please enter customer name")
  return false;
  }
  
  
            if (isNaN(phone))
  {
  alert("Error: phone must be in numbers");
  return false;
  }
  
  
            if (phone=="")
  {
  alert("error: please enter customer phone number");
  return false;
  }    
  
            if (number_of_tickets=="")
  {
  alert("error: please enter Number of Tickets");
  
  return false;
  }  
  
  
            if (isNaN(number_of_tickets))
  {
  alert("ERROR: tickets must be a number");
  
  return false;
  }  
  
            if (number_of_tickets &lt;= 0)
  {
  alert("ERROR: number of tickets must be greater than 0");
  return false;
  }
            if (!(number_of_tickets==Math.round(number_of_tickets)))
  {
  alert("ERROR: number of tickets must be a whole number");
  return false;
  }
  
            if (street_name=="")
  {
  alert("ERROR: Please enter street name");
  return false;
  }
  
  
            if (city=="")
  {
  alert("ERROR: Please enter city name");
  return false;
  }
  
            if (state=="")
  {
  alert("ERROR: Please enter state");
  return false;
  }
  
            if (isNaN(post_code))
  {
  
          alert("ERROR: Postcode must be a number");
  
          return false;
  
  }
  
  
            if (post_code=="")
  {
  alert("ERROR: Please enter valid postcode");
  return false;
  }
  
            if (isNaN(distance))
  {
  alert("ERROR: Distance must be a number");
  return false;
  }
  
  
            if (distance=="")
  {
  alert("ERROR: Please enter distance");
  return false;
  }
  
          document.write("Order Date/Time: ","&lt;b&gt;" + day + "/" + month + "/" + year + "&lt;b&gt;" +", ");
          document.write("&lt;b&gt;" + hours + ":" + minutes + " " + "&lt;/b&gt;", "&lt;br&gt;&lt;br&gt;");
  
          document.write("ORDER DETAILS",'&lt;br&gt;&lt;br&gt;&lt;br&gt;',"Customer Name: "+ customer_name,'&lt;br&gt;'); 
          document.write("Phone: "+phone,'&lt;br&gt;&lt;br&gt;');
  
      document.write("--------Delivery Address--------", '&lt;br&gt;'+street_name,'&lt;br&gt;');
      document.write(city,'&lt;br&gt;');
      document.write(state);
  
  
  
          document.write(" "+ post_code, '&lt;br&gt;&lt;br&gt;');
  
  
      document.write("&lt;u&gt;Order Summary&lt;/u&gt;", '&lt;br&gt;&lt;br&gt;');
  
      document.write("Tickets Ordered: " + number_of_tickets, '&lt;br&gt;&lt;br&gt;');
      document.write("Cost per ticket: "+"$"+cost_per_ticket.toFixed(2) + '&lt;br&gt;&lt;br&gt;');
  
      document.write("Total cost without GST: " +"$"+total_cost_without_gst.toFixed(2) +'&lt;br&gt;&lt;br&gt;');
      document.write("Total cost with GST: "+"$"+total_cost_with_gst.toFixed(2) +'&lt;br&gt;&lt;br&gt;');
  if(distance&gt;20)
      document.write("Delivery Cost: " +"$"+ far_delivery.toFixed(2)+'&lt;br&gt;&lt;br&gt;');
  else
      document.write("Delivery Cost: "+"$"+close_delivery.toFixed(2));
      document.write('&lt;br&gt;&lt;br&gt;');
  
  if(distance&gt;20)
      document.write("TOTAL ORDER COST: " +"$"+far_total.toFixed(2));
      else
      document.write("TOTAL ORDER COST: "+ "$"+close_total.toFixed(2));
  
  
  
          }
  </code></pre>