我目前正在设计一个网站,并且正在创建 Javascript 对象,然后这些对象将通过 fetch() API 发送到服务器。 因此,目前在我的代码中,我使用输入组来让用户输入一些参数。出于效率原因,我决定用户输入的每个输入都将成为我的 Javascript 对象的参数,但我想知道是否可以创建某种“全局可访问”(或类似的东西)对象,让我基本上将每个输入放入某个对象参数中。
<div class="col-xs-2">
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Feed Flow" aria-label="Feed Flow"
aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-
addon3">m<sup>3</sup>/d</span>
</div>
</div>
</div>
这就是代码。这将要求用户输入海水淡化过程中水的供给流量的数字。我想扫描输入框中的所有内容并将其传递给名为 ReverseOsmosis 的对象的参数。 那么在另一种语言中看起来像:ReverseOsmosis.feed_flow=input(假设输入是用户输入的内容)
最佳答案
当您将输入控件放入 form
标记中时,您可以使用 FormData
构造函数来获取键/值对。这些表示为对(具有 2 个元素的数组),但可以轻松转换为普通对象,例如使用 Object.fromEntries
:
document.querySelector('form').addEventListener("change", function () {
var data = new FormData(this);
console.log(Object.fromEntries(data.entries()));
});
<form onsubmit="return false;">
name: <input name="name"><br>
address: <input name="address"><br>
</form>
上面使用的 onsubmit
属性将阻止表单在单击 button
元素时提交(因为它们默认为“submit”类型)。请参阅"Can I make a button not submit a form?"有关这方面的更多信息和替代方案。
关于javascript - 是否可以在 HTML 文件中创建一个可以在同一 HTML 文件中编辑的 Javascript 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55875045/