我的JavaScript数据对象的HTML表单
我的JavaScript数据对象的HTML表单
提问于 2018-06-28 06:46:33
我在var json中预先设置了JS对象数据，如下所示；我正在尝试创建一个简单的html web表单；我想将用户输入作为一组数据写入到我的初始JS对象中。
下面是初始的JS obj数据。提交的用户输入将填充“Name”、“Type”、“DateModifed”和“Size”值，作为json中的新数据集。问题是如何将输入字段值作为附加数据发布到我的JS obj。
var json =[{
"Name": "zips",
"Type": "Directory",
"DateModified": "6/14/2018 17:22:50",
"Size": "5 KB",
}, {
"Name": "presets",
"Type": "Directory",
"DateModified": "5/11/2018 7:32:10",
"Size": "2 KB",
}, {
"Name": "workflow",
"Type": "Non-Directory",
"DateModified": "6/26/2018 10:29:59",
"Size": "6 KB",
},{
"Name": "software",
"Type": "Directory",
"DateModified": "3/16/2018 10:29:59",
"Size": "16 KB",
},{
"Name": "mmm_data",
"Type": "Directory",
"DateModified": "6/27/2018 1:19:29",
"Size": "3 KB",
},
// i.e. would like new block to populate via web form entry
{
"Name": "jobs",
"Type": "Directory",
"DateModified": "4/27/2018 11:59:59",
"Size": "3 KB",
},
// end area outline
];HTML表单：
<div id="addUpload">
<p>Insert details below for new upload:</p>
<form id="test" action="#" method="post">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" />
</div>
<div class="form-group">
<label for="select">Type</label>
<select name="select" class="form-control">
<option value="none" selected="selected">Directory</option>
<option value="nonDir">Non-Directory</option>
</select>
</div>
<div class="form-group">
<label for="email">Date Modified</label>
<input class="form-control" type="text" name="dateM" id="dateM" />
</div>
<div class="form-group">
<label for="size">Size</label>
<input class="form-control" type="sized" name="sized" id="sized" />
</div>
<p>
<input type="submit" value="Upload New" class="btn btn-primary btn-block" />
</p>
</form>
<pre id="output"></pre>
</div>最近失败的逻辑：
// function UploadAdd() {
// function toJSONString( form ) {
// var obj = {};
// var elements = form.querySelectorAll( "input, select, textarea" );
// for( var i = 0; i < elements.length; ++i ) {
// var element = elements[i];
// var name = element.name;
// var value = element.value;
//
// if( name ) {
// obj[ name ] = value;
// }
// }
//
// return JSON.stringify( obj );
// }
//
// document.addEventListener( "DOMContentLoaded", function() {
// var form = document.getElementById( "test" );
// var output = document.getElementById( "output" );
// form.addEventListener( "submit", function( e ) {
// e.preventDefault();
// var json = toJSONString( this );
// output.innerHTML = json;
//
// }, false);
//
// });一个可视化的(验证不是问题，处理帖子就行了)：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-28 08:57:52
这可能就是你想要的。这只是一个带有click事件的push to array操作。
var json =[{
"Name": "zips",
"Type": "Directory",
"DateModified": "6/14/2018 17:22:50",
"Size": "5 KB",
}, {
"Name": "presets",
"Type": "Directory",
"DateModified": "5/11/2018 7:32:10",
"Size": "2 KB",
}, {
"Name": "workflow",
"Type": "Non-Directory",
"DateModified": "6/26/2018 10:29:59",
"Size": "6 KB",
},{
"Name": "software",
"Type": "Directory",
"DateModified": "3/16/2018 10:29:59",
"Size": "16 KB",
},{
"Name": "mmm_data",
"Type": "Directory",
"DateModified": "6/27/2018 1:19:29",
"Size": "3 KB",
},
// i.e. would like new block to populate via web form entry
{
"Name": "jobs",
"Type": "Directory",
"DateModified": "4/27/2018 11:59:59",
"Size": "3 KB",
},
// end area outline
];
document.querySelector("#submit").onclick=()=>{
json.push({
Name:document.querySelector("#name").value,
Type:document.querySelector("select").value,
DateModified:dateM.value,
Size:sized.value
});
output.innerText=JSON.stringify(json);
}<div id="addUpload">
<p>Insert details below for new upload:</p>
<form id="test" action="#" method="post">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" />
</div>
<div class="form-group">
<label for="select">Type</label>
<select name="select" class="form-control">
<option value="none" selected="selected">Directory</option>
<option value="nonDir">Non-Directory</option>
</select>
</div>
<div class="form-group">
<label for="email">Date Modified</label>
<input class="form-control" type="text" name="dateM" id="dateM" />
</div>
<div class="form-group">
<label for="size">Size</label>
<input class="form-control" type="sized" name="sized" id="sized" />
</div>
<p>
<input id="submit" type="button" value="Upload New" class="btn btn-primary btn-block" />
</p>
</form>
<div id="output"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51072430
复制相关文章
相似问题