How to rerun an entire js script after changing an HTML form input

March 21, 2023

I have a very basic web app that I’m having difficulty with. I wrote a node.js script that does a bunch of calculations and spits out a bunch of data, and I decided I wanted to be able to display graphs of the data in the browser (I chose to use plotly.js). So I made some modifications to the .js file and added a .html file (hancock.html) like this:

<head>
  <!-- Load hancock.js into the DOM -->
  <script type="module" src="./hancock.js"></script>
</head>

<body>
  <form action="hancock.html">
    <label for="weight">Weight:</label>
    <input
      type="number" id="weight" name="weight" value="175" min="1" max="10000" required
    />
    <label for="weight">lbs</label>
    <input type="submit" />
  </form>
  <div id="height"><!-- Height chart --></div>
  <div id="velocity"><!-- Velocity chart--></div>
  <div id="acceleration"><!-- Acceleration chart--></div>
  <script></script>
</body>

With the script looking something like this:

import "./node_modules/lodash/lodash.js";
import "./node_modules/plotly.js-dist/plotly.js";

  let weight = document.getElementById("weight").value; // lbs
  // other constants here
  // some functions here

  let traceData = {
    height: [],
    velocity: [],
    acceleration: [],
    time: [],
  };

  while (position > 0) {
    // some calculations here
    traceData.height.push(height);
    traceData.velocity.push(velocity);
    traceData.acceleration.push(acceleration);
  }

  traceData.time = _.range(0, max_time, delta_t);

  var heightData = {
    x: traceData.time,
    y: traceData.height,
    type: "scatter",
  };

  var velocityData = {
    x: traceData.time,
    y: traceData.velocity,
    type: "scatter",
  };

  var accelerationData = {
    x: traceData.time,
    y: traceData.acceleration,
    type: "scatter",
  };

  var heightLayout = {
    // Layout stuff
  };

  var velocityLayout = {
    // Layout stuff
  };

  var accelerationLayout = {
    // Layout stuff
  };

  Plotly.newPlot("height", [heightData], heightLayout);
  Plotly.newPlot("velocity", [velocityData], velocityLayout);
  Plotly.newPlot("acceleration", [accelerationData], accelerationLayout);

  console.log("Operation takes ", max_time, "seconds");

This ran and produced the graphs, but I wanted to be able to control some inputs for the code to run and produce updated graphs if the user changed these inputs. So I started with weight by creating the <input/> shown in the .html above, but when I change the input, the value changes back to 175 every time and the same graph is reproduced (note: I want 175 to be the default value).

After reading this answer I tried wrapping the entire script (besides the import statements) into a function called recalculate() (which I then called at the bottom of hancock.js) and then changing the form action to <form action="recalculate()">, but this just resulted in being redirected to a page saying Cannot GET /recalculate() (IntelliSense seems to think I should be giving it a file in the directory).
Also tried changing the action to action="hancock.js" which just displays the text of the file.
I also changed the script type in the header to type="text/javascript", and the graphs didn’t load at all.

I’m sure this is obvious but I’m very new to front-end and HTML so I’m sure it’s something really stupid, but I’ve been struggling with it for way too long not to just ask at this point. Any resources to point me in the right direction to learn how to do what I’m trying to do would be appreciated.

>Solution :

You should add an Event Listener to your form submit event:

<!-- 
Change the action to "#" to avoid reloading the page,
and add some id to identify your form:
 -->
<form action="#" id="myForm">
    <label for="weight">Weight:</label>
    <input
      type="number" id="weight" name="weight" value="175" min="1" max="10000" required
    />
    <label for="weight">lbs</label>
    <input type="submit" />
</form>

Then your script should look like:

const myFormSubmitHandler = (event) => {
  // do your calculations here

  event.preventDefault(); // important to avoid browser from reloading the page on submit
}

document.getElementById('myForm').addEventListener('submit', myFormSubmitHandler);