如何解决如何将数据从HTML文件发送到.Js,然后求解并以HTML返回结果
首先是HTML文件
<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文件中的 form 数据发送到test2.js
并返回结果并将其打印在HTML页面中?
解决方法
您可以通过侦听form-submit-event在客户端上完全执行计算。这是一个基于您的代码的示例:
// 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。