सबसे पहले एचटीएमएल फाइल

<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>

नीचे test2.js नाम की .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);

मैं HTML फ़ाइल से test2.js को फ़ॉर्म डेटा कैसे भेजूं और परिणाम कैसे लौटाऊं और इसे HTML पृष्ठ में प्रिंट करूं?

0
Ahmed Nayeem 7 अक्टूबर 2020, 11:06

1 उत्तर

सबसे बढ़िया उत्तर

आप फॉर्म-सबमिट-इवेंट को सुनकर क्लाइंट पर पूरी तरह से गणना कर सकते हैं। यहां आपके कोड के आधार पर एक उदाहरण दिया गया है:

// 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>
0
Andre Nuechter 7 अक्टूबर 2020, 08:27