Form to a format Javascript can read

Question

I have a .js file that my web app uses to read today's schedule. I want this file to be easily edited, say by an HTML form.

I am trying to make an HTML form that defines all the schedules for the day. A small portion of the form is below.

<form action="/admin/special.php" method="POST">
<div data-role="fieldcontain">
<label for="date">Today's Date</label>
<input type="date" name="date" id="date" value=""  /><br /><br />
<label for="code">Code</label>
<input type="text" name="code" id="code" value=""  /><br /><br />
<label for="hour">Hour</label>
<input type="text" name="hour" id="hour" value=""  />
<label for="minute">Minute</label>
<input type="text" name="minute" id="minute" value=""  />
<label for="event">Period Name:</label>
<input type="text" name="event" id="event" value=""  /><br /><br />
<input type="submit" value="Save" />
</div>
</form>

How do I turn this into something javascript can understand? My web app's schedule looks like this.

function Schedule() {
scheduletype = "Demo Schedule"
schedule = [
  [sc1, 'sc1', 8, 35, "Period 1"],
  [sc2, 'sc2', 9, 35, "Period 2"],
  [sc3, 'sc3', 10, 35, "Period 3"],
  [sc4, 'sc4', 12, 00, "Period 4"],
  [sc5, 'sc5', 13, 25, "Period 5"]
];
}

Any help is appreciated.Thank you.

Here you can find solutions using jquery: https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery — Adelin, Jul 03 '19 at 11:57
No need for jQuery, https://developer.mozilla.org/en-US/docs/Web/API/FormData — Teemu, Jul 03 '19 at 11:58

score 0 · Answer 1 · answered Jul 03 '19 at 12:25

var form = document.querySelector("form");

function getFormData(form) {
  return [].filter.call(form.querySelectorAll("input"), function(input) {
    return input.type !== "submit";
  }).map(function(input) {
    return input.type === "number" ? +input.value : input.value;
  });
}

form.addEventListener("submit", function(ev) {
  console.log(getFormData(form));
  ev.preventDefault();
});

<form action="/admin/special.php" method="POST">
  <div data-role="fieldcontain">
    <label for="date">Today's Date</label>
    <input type="date" name="date" id="date" value="" /><br /><br />
    <label for="code">Code</label>
    <input type="text" name="code" id="code" value="" /><br /><br />
    <label for="hour">Hour</label>
    <input type="number" name="hour" id="hour" value="" />
    <label for="minute">Minute</label>
    <input type="number" name="minute" id="minute" value="" />
    <label for="event">Period Name:</label>
    <input type="text" name="event" id="event" value="" /><br /><br />
    <input type="submit" value="Save" />
  </div>
</form>

Form to a format Javascript can read

1 Answers1