javascript - 如何将数据从 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 文件发送到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>
推荐阅读
- javascript - 为什么使用 AJAX 表单方法时文件上传在 formsubmit.co 中不起作用?
- c# - 找不到路径“C:\inetpub\AspNetCoreWebApps\app\EmailTemplates\example.cshtml”的一部分
- python - 使用 MyPy 对 Python 进行类型检查会破坏测试覆盖率报告
- python - 为什么当我尝试记录列表时 python 会生成错误
- python - 旋转图形时保持 3d 轴静止(在 Python 中绘制,scatter_3d)
- fluent-ui - FluentUI TextField 组件自定义显示图标
- python - 合并两个图时Python igraph合并属性
- html - 使用nodejs从谷歌表单获取html
- python - 函数调用栈:train_function,车辆颜色识别
- javascript - 更改设置时,Shopify 主题中的光滑滑块堆叠