title: Using Javascript to put text into a table from a form, it dissappears when I click the button
body: <p>I have only been programming for about a month and I'm trying to put the output of a form into a table, all of which I'm trying to make in Javascript.</p>
  
  <p>I've got it to go in, BUT it disappears as soon as I click the button.</p>
  
  <p>How can I fix this to keep the text there permanently once clicked?</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Make a booking&lt;/title&gt;
      &lt;link rel="stylesheet" href="booking_page.css"/&gt;
      &lt;script type="text/javascript"&gt; 
              var headings = new Array();
                  headings[0] = "Your colleague";
                  headings[1] = "CLOSED";
                  headings[2] = "9:00";
                  headings[3] = "9:15";
                  headings[4] = "9:30";
                  headings[5] = "9:45";
                  headings[6] = "10:00";
                  headings[7] = "10:15";
                  headings[8] = "10:30";
                  headings[9] = "10:45";
                  headings[10] = "11:00";
                  headings[11] = "11:15";
                  headings[12] = "11:30";
                  headings[13] = "11:45";
                  headings[14] = "12:00";
                  headings[15] = "12:15";
                  headings[16] = "12:30";
                  headings[17] = "12:45";
                  headings[18] = "1:00";
                  headings[19] = "1:15";
                  headings[20] = "1:30";
                  headings[21] = "1:45";
                  headings[22] = "2:00";
                  headings[23] = "2:15";
                  headings[24] = "2:30";
                  headings[25] = "2:45";
                  headings[26] = "3:00";
                  headings[27] = "3:15";
                  headings[28] = "3:30";
                  headings[29] = "3:45";
                  headings[30] = "4:00";
                  headings[31] = "4:15";
                  headings[32] = "4:30";
                  headings[33] = "4:45";
                  headings[34] = "5:00";
                  headings[35] = "5:15";
                  headings[36] = "5:30";
                  headings[37] = "5:45";
                  headings[38] = "6:00";
                  headings[39] = "6:15";
                  headings[40] = "6:30";
                  headings[41] = "6:45";
                  headings[42] = "7:00";
                  headings[43] = "7:15";
                  headings[44] = "7:30";
                  headings[45] = "7:45";
                  headings[46] = "8:00";
                  headings[47] = "8:15";
                  headings[48] = "8:30";
                  headings[49] = "8:45";  
                  headings[50] = "CLOSED";    
  
              var colleague = new Array();
                  colleague[0] = "Daniel - Mananger";
                  colleague[1] = "Julia - Colleague";
                  colleague[2] = "Michelle - Colleague";
                  colleague[3] = "Peter - Colleague";
  
          //MAKE TABLE//
          function addTable(){
              var bookingSlots = document.getElementById('booking_slots');
              var table = document.createElement('TABLE');
              var tableBody = document.createElement('TBODY');
  
              table.border = 1;
              table.appendChild(tableBody);
  
              //table columns
              var tr = document.createElement('TR');
              tableBody.appendChild(tr);
              for(i=0;i&lt;headings.length;i++){
                  var th = document.createElement('TH');
                  th.width = "auto";
                  th.class = "table_header";
                  th.appendChild(document.createTextNode(headings[i]));
                  tr.appendChild(th);
              }
  
              //table rows
              for(i=0;i&lt;colleague.length;i++){
                  var tr = document.createElement('TR');
                  for(j=0;j&lt;1;j++){
                      var td = document.createElement('TD');
                      td.appendChild(document.createTextNode(colleague[i]));
                      td.id = colleague[i] + headings[j];
                      tr.appendChild(td);
                  }
                  for(j=1;j&lt;(headings.length)-1;j++){
                      var colName = document.getElementById('col_name');
                      var td = document.createElement('TD');
                      td.id = colleague[i] + headings[j];
                      tr.appendChild(td);
                  }
                  for(j=headings.length;j&lt;(headings.length)+1;j++){
                      var td = document.createElement('TD');
                      td.appendChild(document.createTextNode("CLOSED"));
                      td.id = colleague[i] + headings[j];
                      tr.appendChild(td);
                  }
                  tableBody.appendChild(tr);
              }
              bookingSlots.appendChild(table);
              colleague;
          }
  
          function colNameFunct(){
              var colName = document.getElementById("col_name");
              var select = createElement('SELECT');
              for(k=0;k&lt;colleague.length;k++){
                  var option = document.createElement('OPTION');
                  option.appendChild(document.createTextNode(colleague[k]));
                  select.appendChild(option);
              }
              colName.appendChild(select);
          }
  
          //MAKE A BOOKING//
          function makeBooking(){
              var aptTime = document.getElementById('apt_time').value;
              var colleagueName = document.getElementById('col_name').value;
              var aptBlock = document.getElementById(colleagueName + aptTime);
              aptBlock.innerHTML = colleagueName + aptTime;
          }
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="addTable()"&gt;
      &lt;header&gt;
          &lt;img id="phone_shop_logo" href="Phone Shop logo.jpg"&gt;
      &lt;/header&gt;
  
      &lt;nav&gt;
      &lt;/nav&gt;
  
      &lt;aside&gt;
      &lt;/aside&gt;
  
      &lt;section&gt;
          &lt;form class="form" action="" method="get"&gt;
              Name:&lt;input type="text" id="cust_name" name="cust_name"/&gt;
              Contact number:&lt;input type="text" id="cont_number" name="cont_number"/&gt;&lt;br/&gt;
              Date:&lt;input type="date" id="apt_date" name="apt_date"/&gt;
              Time:&lt;input type="time" id="apt_time" name="apt_time"/&gt;
              Colleague:&lt;select id="col_name" name="col_name"&gt;
                  &lt;option&gt;Daniel - Mananger&lt;/option&gt;
                  &lt;option&gt;Julia - Colleague&lt;/option&gt;
                  &lt;option&gt;Michelle - Colleague&lt;/option&gt;
                  &lt;option&gt;Peter - Colleague&lt;/option&gt;
              &lt;/select&gt;
              &lt;br/&gt;
              &lt;input type="submit" id="submit_button" value="Book me in" onclick="makeBooking()"/&gt;
          &lt;/form&gt;
          &lt;div id="booking_slots"/&gt;
      &lt;/section&gt;
  
      &lt;footer id="footer"&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>