How to send data from HTML file to .Js then solve and return result in HTML

Question

Firstly the HTML file

<form name=requirements action = "test2.js" method="GET">
   <table border="3px">
      <tr>
         <td></td>
         <td><b>Price List</b></td>
         <td></td>
      </tr>
      <tr>
         <td>Items</td>
         <td>Quantity</td>
         <td>Price</td>
         <td>Requirement</td>
      </tr>
      <tr>
         <td>1 Bottle</td>
         <td>1 item</td>
         <td>4.10 Euros</td>
         <td><input type="number" name="bottle" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 Pack</td>
         <td>11 bottles</td>
         <td>40 Euros</td>
         <td><input type="number" name="pack" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 Box</td>
         <td>24 packs</td>
         <td>950 Euros</td>
         <td><input type="number" name="box" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 chocolate bar</td>
         <td>1 bar</td>
         <td>3 Euros</td>
         <td><input type="number" name="bar" maxlength="20"></td>
      </tr>
      <tr>
         <td>1 chocolate pack</td>
         <td>5 bars</td>
         <td>14 Euros</td>
         <td><input type="number" name="back" maxlength="20"></td>
      </tr>
      <tr>
         <td><input type="submit" value="submit"></td>
      </tr>
   </table>
</form>

below is the .js file named test2.js

let bottle = document.getElementById("bottle").value;
let pack = document.getElementById("pack").value;
let packf = pack * 11;
let box = document.getElementById("box").value;
let boxf = box * 264;
let total = boxf + packf + bottle;
let required = total;
console.log(required);

how do I send the form data from the HTML file to test2.js and return the result and print it in the HTML page?

You're trying to use client-side JS code like a server's API url. Instead of setting `test2.js` as action, add an `onsubmit` listener to your form and run the JS code inside the handler function. Basically this: https://stackoverflow.com/questions/5384712/intercept-a-form-submit-in-javascript-and-prevent-normal-submission — , Oct 07 '20 at 08:12

Andre Nuechter · Accepted Answer · 2020-10-07T08:27:51.290

You can do the calculation completely on the client by listening for the form-submit-event. Here is an example based on your code:

// Hint: the HTML-elements need to have an id for this method to work
const form = document.getElementById("form");
const result = document.getElementById("result");
// also it's better to cache DOM-selections in order to not repeat that work
const bottle = document.getElementById("bottle");
const pack = document.getElementById("pack");
const box = document.getElementById("box");

form.addEventListener("submit", (event) => {
  const packf = pack.value * 11;
  const boxf = box.value * 264;
  // value attributes of HTML-elements are always strings,
  // so we need to parse them.
  // multiplying does that automatically, unlike addition
  const total = boxf + packf + Number(bottle.value);
  // display the result below the table
  result.textContent = total;
  // prevent the browser default behavior which would reload the page
  event.preventDefault();  
});

<form name=requirements action="test2.js" method="GET" id="form">
  <table border="3px">
      <tr>
          <td></td>
          <td><b>Price List</b></td>
          <td></td>
      </tr>
      <tr>
          <td>Items</td>
          <td>Quantity</td>
          <td>Price</td>
          <td>Requirement</td>
      </tr>
      <tr>
          <td>1 Bottle</td>
          <td>1 item</td>
          <td>4.10 Euros</td>
          <td><input type="number" id="bottle" name="bottle" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 Pack</td>
          <td>11 bottles</td>
          <td>40 Euros</td>
          <td><input type="number" id="pack" name="pack" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 Box</td>
          <td>24 packs</td>
          <td>950 Euros</td>
          <td><input type="number" name="box" id="box" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 chocolate bar</td>
          <td>1 bar</td>
          <td>3 Euros</td>
          <td><input type="number" name="bar" maxlength="20"></td>
      </tr>
      <tr>
          <td>1 chocolate pack</td>
          <td>5 bars</td>
          <td>14 Euros</td>
          <td><input type="number" name="back" maxlength="20"></td>
      </tr>
      <tr>
          <td><input type="submit" value="submit"></td>
      </tr>
  </table>
</form>
<div id="result"></div>

anyway I can contact you real time? having some trouble with the code and dont really want to post my entire code here — Ahmed Nayeem, Oct 07 '20 at 11:27
@AhmedNayeem I don't do consulting in my free-time ;) The proper way to do this would be to post further questions that describe specific problems you're having which can be demonstrated via a minimal code example. BTW, almost all the JavaScript code you're going to deploy is going to be publicly visible. — Andre Nuechter, Oct 09 '20 at 10:22

How to send data from HTML file to .Js then solve and return result in HTML

1 Answers1