javascript - 将 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 进行 POSTing，并且得到状态 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预期

不确定这是否重要，但这是在 .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;
        }
    });