将 HTML 表单输入存储在 JS 对象中

Question

我知道这里有一个非常相似的问题，但我的对象层次结构与该问题中的不同。

无论如何，我想将 HTML 表单输入数据存储到我的 JavaScript 对象中。这是我的 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>

我想要的是获取这 3 个输入的值并将其存储在我的 JS 对象中。

我知道将数据发布到我的 API 所需的正确 JSON 格式。 （我尝试使用 POSTman 发布，我得到状态 200，所以它可以工作）。正确的格式是：

{
    "auction": {
        "Title": "Auction1",
        "EDate": "01/01/1990",
        "MinBid": 30
    },
    "productIds": [1,2,3]
}

这是我的 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>

如您所见，我正在使用 document.getElementById('title').value; 获取值并分配它们，但出现语法错误 Expected : Comma expected

不确定这是否重要，但这是在 .NET MVC5 项目中。

Answer 1

将您的值分配代码集移动到 submitHandler 中。检查 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;
        }
    });