【JavaScript】Input field動態產生JSON
搜尋網頁中的輸入框，並將其屬性name及value加入到陣列中。最後，使用JSON.stringify方法將陣列轉換為JSON字串，並使用console.log或alert來輸出JSON字串的內容。
JavaScript（參考）︰
<script language="JavaScript">
//Input field動態產生JSON
const result = Array.from($("input[ type='text']"))
.reduce((before, after) => {
const name = $(after).attr('name');
const value = $(after).val();
return {
...before,
[name]: value
}
}, {});
//console.log(JSON.stringify(result));
alert(JSON.stringify(result));
</script>
const result = Array.from($("input[ type='text']"))
.reduce((before, after) => {
const name = $(after).attr('name');
const value = $(after).val();
return {
...before,
[name]: value
}
}, {});
//console.log(JSON.stringify(result));
alert(JSON.stringify(result));
</script>
部分HTML（參考）︰
<div class="panel-body"><div class="form-group">
<label for="fid">編號</label>
<input type="text" class="form-control" id="fid" name="Id" readonly>
</div>
<div class="form-group">
<label for="fname">名稱</label>
<input type="text" class="form-control" id="fname" name="Name" required>
</div>
<div class="form-group">
<label for="fcategory">類別</label>
<input type="text" class="form-control" id="fcategory" name="Category" required>
</div>
<div class="form-group">
<label for="fprice">價格</label>
<input type="text" class="form-control" id="fprice" name="Price" required>
</div>
<input type="button" value="修改" id="btnEdit" class="btn btn-success" />
</div>
執行畫面︰
留言
張貼留言