javascript - 如何从已登顶的表格中获取所有数据并将其添加到新列表中
问题描述
我想把所有提交的数据放到一个列表中( -item: bannana -itemNum: #3330...)
<form id="form" action="">
<h3>Item:</h3>
<input name="item" type="text">
<h3>Item numbers:</h3>
<input name="itemNum" type="number">
<h3>Quantity:</h3>
<input name="quantity" type="number">
<h3> Price:</h3>
<input name="price" type="number">
<h3>Discount:</h3>
<input name="discount" type="number">
<br>
<button id="but">Submit</button>
</form>
解决方案
只有一行:
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
见表格数据
在上下文中:
myForm = document.querySelector('#myForm')
myForm.onsubmit = evt =>
{
evt.preventDefault() // disable submit page reload
console.clear()
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.log( formInputs )
}
body, textarea, input {
font-family : Helvetica, Arial sans-serif;
font-size : 12px;
}
label {
font-size : 1.2em;
display : block;
float : left;
clear : both;
width : 10em;
white-space : nowrap;
overflow : hidden;
font-weight : bold;
padding-top : .7em;
line-height: 1.4em;
}
label:after {
content : '....................................';
font-weight : normal;
color : lightslategray;
}
input {
display : block;
float : left;
width : 5em;
margin : .3em;
}
button {
display : block;
float : left;
clear : both;
margin-top : .6em;
}
.as-console-wrapper { max-height:100% !important; top:0; left:50% !important; width:50%; }
.as-console-row { background-color: yellow; }
.as-console-row::after { display:none !important; }
<form id="myForm" action="">
<label> Item:</label> <input name="item" type="text" >
<label> Item numbers:</label> <input name="itemNum" type="number" >
<label> Quantity:</label> <input name="quantity" type="number" >
<label> Price:</label> <input name="price" type="number" >
<label> Discount:</label> <input name="discount" type="number" >
<button type="submit">Submit</button>
</form>
推荐阅读
- azure-devops - 如何限制查看 Azure DevOps 项目设置的访问权限?
- typescript - 如何将字符串联合重新映射为数字联合?
- python - 自动化导入模块
- c++ - C++20协程,co_return后调用者函数未完成(看起来像挂起)
- function - 如何在循环中将 lines() 迭代器作为参数传递给函数
- javascript - 如何将查询参数传递给重新连接的 websocket?
- python - 在python中打印输出的开头添加空格
- node.js - Lambda 流编码字符串
- tensorflow - 如何将数据集拆分为张量流中的输入和标签?
- node.js - 来自下一个 js 应用程序的 Graphql 400 错误请求?