我有下面的形式,试图获取id和值并将数据放在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);
});
答案 0 :(得分:1)
此处将使用ID /值构建对象。注意:我添加了设置间隔,以便您可以键入并查看正在填充的对象。
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>
答案 1 :(得分:0)
$('.form-control text-box single-line')
应该是$('.form-control.text-box.single-line')
要获取ID,请使用.attr('id')
$(this).val()
data('val')
或.attr('data-val')
items = {};
应该是items = [];
var items = [];
$('.form-control.text-box.single-line').each(function () {
var obj = {
id: $(this).attr('id'),
dataVal : $(this).attr('data-val'),
value: $(this).val()
};
items.push(obj);
});
console.log(items);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control text-box single-line" id="expiry-date1" name="Terms.Law" data-val="dataVal1" type="text" value="1" />
<input class="form-control text-box single-line" id="expiry-date2" name="Terms.Law" data-val="dataVal2" type="text" value="2" />
<input class="form-control text-box single-line" id="expiry-date3" name="Terms.Law" data-val="dataVal3" type="text" value="3" />
要为每个obj
添加一个密钥,请使用{ [key] : .... }
var items = [];
$('.form-control.text-box.single-line').each(function () {
var obj = {
[$(this).attr('data-val')] : {
id: $(this).attr('id'),
dataVal : $(this).attr('data-val'),
value: $(this).val()
}
}
items.push(obj);
});
console.log(items);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control text-box single-line" id="expiry-date1" name="Terms.Law" data-val="dataVal1" type="text" value="1" />
<input class="form-control text-box single-line" id="expiry-date2" name="Terms.Law" data-val="dataVal2" type="text" value="2" />
<input class="form-control text-box single-line" id="expiry-date3" name="Terms.Law" data-val="dataVal3" type="text" value="3" />