[英]Storing HTML form input in a JS object
I know there is a very similar question asked over here but my object hierarchy is different than the one in that question. 我知道这里有一个非常相似的问题,但是我的对象层次结构不同于该问题中的对象层次结构。
Anyways, I want to store the HTML form input data in to my JavaScript object. 无论如何,我想将HTML表单输入数据存储到我的JavaScript对象中。 Here is my HTML form code:
这是我的HTML表单代码:
<form id="newAuction">
<input id="title" name="title" required type="text" value="" />
<input id="edate" name="edate" required type="datetime" value="" />
<input id="minbid" name="minbid" required type="number" value="" />
<button class="btn btn-primary">Submit</button>
</form>
What I want is to get the values of these 3 inputs and store it in my JS object. 我想要的是获取这3个输入的值并将其存储在我的JS对象中。
I know the proper JSON format needed to post the data to my API. 我知道将数据发布到我的API所需的正确JSON格式。 (I tried POSTing with POSTman and I get a status 200, so it works).
(我尝试使用POSTman进行POST,但状态为200,因此可以正常工作)。 The proper format is:
正确的格式为:
{
"auction": {
"Title": "Auction1",
"EDate": "01/01/1990",
"MinBid": 30
},
"productIds": [1,2,3]
}
This is what my JS object looks like: 这是我的JS对象的样子:
<script>
$(document).ready(function() {
var vm = {
auction: {},
productIds: []
};
//validation and posting to api
var validator = $("#newAuction").validate({
//assigning values
vm.auction.Title = document.getElementById('title').value;
vm.auction.MinBid = document.getElementById('minbid').value;
vm.auction.EDate = document.getElementById('edate').value;
vm.productIds.push(1);
submitHandler: function () {
$.ajax({
url: "/api/newAuction",
method: "post",
data: vm
})
.done(function () {
toastr.success("Auction Added to the db");
//setting the vm to a new vm to get rid of the old values
var vm = { auction: {}, productIds: [] };
validator.resetForm();
})
.fail(function () {
toastr.error("something wrong");
});
return false;
}
});
});
</script>
As you can see, I am using document.getElementById('title').value;
如您所见,我正在使用
document.getElementById('title').value;
to get the values and assign them but I'm getting the syntax error Expected : Comma expected
获取值并分配它们,但我遇到语法错误
Expected : Comma expected
Not sure if this matters, but this is inside a .NET MVC5 project. 不知道这是否重要,但这在.NET MVC5项目中。
Move your value assignment set of codes inside submitHandler. 将值分配的代码集移到SubmitHandler中。 Check the syntax of validate() https://jqueryvalidation.org/validate/
检查validate() https://jqueryvalidation.org/validate/的语法
//validation and posting to api
var validator = $("#newAuction").validate({
submitHandler: function () {
//assigning values
vm.auction.Title = document.getElementById('title').value;
vm.auction.MinBid = document.getElementById('minbid').value;
vm.auction.EDate = document.getElementById('edate').value;
vm.productIds.push(1);
$.ajax({
url: "/api/newAuction",
method: "post",
data: vm
})
.done(function () {
toastr.success("Auction Added to the db");
//setting the vm to a new vm to get rid of the old values
var vm = { auction: {}, productIds: [] };
validator.resetForm();
})
.fail(function () {
toastr.error("something wrong");
});
return false;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.