test Register 2019

formData, arrow fn on doc;ready, classes array anomalous behavior

by Steve Alexander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<title>jdfidde for buildClasses</title>
</head>
<form action="" method="post">
<div>
  <label>First Name
    <input type="text" name="fname" size="25">
  </label>
</div>
<div>
  <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
</div>
<div>
  <label>email address
    <input type="email" name="email" size="25">
  </label>
</div>
<div>
  <label>08:30 Keynote Speaker
    <select name="select">
      <option value="" name="defaultOptionUnsure">unsure</option>
      <option value="attend" name="">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
  <label>09:00 Classes
    <select name="select">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
    </label>
  <label>10:30 Classes
    <select name="select">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
  </label>
</div>
<div>
  <input type="submit" value="submit form">
</div>
</form>

JavaScript

$(document).ready( function() {
  document.addEventListener("submit", (e) => {
  var formData = $( 'form' ).serializeArray();
  console.log('log formData : ', formData);
  var classes =  buildClasses(formData);
// updageTable(classes);
  console.log('log classes after build : ', classes);
  });  //  end arrow fn callback on event listener
});  // end doc.ready

function buildClasses(fd) {
  var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
  var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];  
  var ts = '';
  var rm = '';
  var startIndex = 3; 
  var classes = [];
  console.log('log classes post-def : ', classes);
  
  if(fd[startIndex].value == 'attend') { 
    fd[startIndex].value = 'chapel'; 
  }
    else {fd[startIndex].value = 'unsure';}
  for(var i = startIndex; i < fd.length; i++) {
    if( !fd[i].value  || fd[i].value == 'unsure') {} 
      else {
             ts = timeslots[i - startIndex];
             rm = fd[i].value;  
 
                console.log('i, fd[i].value : ', i, fd[i].value);
                console.log('classes pre-push', classes);
                
             classes.push(
                            {
                               timeslot: ts,
                               room: rm
                            }
                         ); 
                                 
               console.log('classes post-push : ', classes);                  
                                  
           }  //  end else/if
   }  //  end for
  return classes;
}  //  end def fn buildClassSelections