javascript - 获取每个表单部分的 id 和 value
问题描述
我有下面的表格并试图获取 id 和 value 并将数据放入 json 以传递给我的控制器。下面是代码。我看不到我错过了什么。这是第一次进入 Web 开发
<div class="form-section">
<div class="section-header">
<span class="collapse-symbol"><i class="fas fa-angle-right"></i></span>
<span class="section-title">
Term
</span>
</div>
<div class="content" id="quote-edit-form">
<div class="row-container">
<div class="row-child">
<label class="control-label" for="StartDate">StartDate Date</label>
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." id="Start-date" name="Terms.StartDate" type="datetime" value="" />
<label class="control-label" for="Terms_Date">Terms Date</label>
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Terms Date must be a date." id="continuity-date" name="Terms.ContinuityDate" type="datetime" value="" />
<label class="control-label" for="Terms Period">Extension Period</label>
<input class="form-control text-box single-line" id="expiry-date" name="Terms.ExtensionPeriod" type="text" value="" />
</div>
<div class="row-child">
<label class="control-label" for="Terms.Choice">Choice</label>
<input class="form-control text-box single-line" id="expiry-date" name="Terms.Law" type="text" value="" />
<label class="control-label" for="Terms_C">C</label>
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Commission must be a number." id="expiry-date" name="Terms.C" type="text" value="" />
<label class="control-label" for="Terms_P">P</label>
<input class="form-control text-box single-line" id="expiry-date" name="Terms.P" type="text" value="" />
</div>
</div>
我尝试了以下方法来从我的 html 中捕获数据
var items = {};
$('.form-control text-box single-line').each(function () {
var obj = {
id: $(this).find('.id').val(),
value: $(this).find('.value').val()
};
o.items.push(obj);
});
解决方案
在这里,这将使用 id/value 构建一个对象。注意:我添加了设置间隔,以便您可以键入并查看正在填充的对象。
const buildItems = () => {
let items = {};
document.querySelectorAll('input').forEach(element => {
items[element.id] = element.value;
});
return items;
};
// check every 5secs (just to demo working)
setInterval(() => console.log(buildItems()), 5000);
<div class="form-section">
<div class="section-header">
<span class="collapse-symbol"><i class="fas fa-angle-right"></i></span>
<span class="section-title">
Term
</span>
</div>
<div class="content" id="quote-edit-form">
<div class="row-container">
<div class="row-child">
<label class="control-label" for="StartDate">StartDate Date</label>
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." id="Start-date" name="Terms.StartDate" type="datetime" value="" />
<label class="control-label" for="Terms_Date">Terms Date</label>
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Terms Date must be a date." id="continuity-date" name="Terms.ContinuityDate" type="datetime" value="" />
<label class="control-label" for="Terms Period">Extension Period</label>
<input class="form-control text-box single-line" id="expiry-date" name="Terms.ExtensionPeriod" type="text" value="" />
</div>
<div class="row-child">
<label class="control-label" for="Terms.Choice">Choice</label>
<input class="form-control text-box single-line" id="expiry-date" name="Terms.Law" type="text" value="" />
<label class="control-label" for="Terms_C">C</label>
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Commission must be a number." id="expiry-date" name="Terms.C" type="text" value="" />
<label class="control-label" for="Terms_P">P</label>
<input class="form-control text-box single-line" id="expiry-date" name="Terms.P" type="text" value="" />
</div>
</div>
推荐阅读
- java - Nodejs代码将十六进制字符串转换为字节数组?
- ruby-on-rails - 无法在 Ruby on Rails 中使用 Sass 函数
- sql-server - 如何查看对 SQL Server 数据库进行更改的内容?
- c# - MySql 数据库上的目录隐私会停止 C# 吗?
- c - 将字符串指针数组组合成一个数组
- cassandra - datastax cassandra 驱动程序:如何从插入语句的 ResultSet 列表中返回成功或失败
- postgresql - 点击流:用户 ID 的 UTM 路径的 PostgreSQL 交叉表
- html - Enter/Space 键仅对 JAWS + IE 中的某些按钮不起作用
- ssis - SSIS 作业通过自动化失败
- spring-boot - 覆盖应用程序 SpringBoot EmbeddedServletContainerFactory