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进行POST，我得到状态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;
        }
    });

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

1 个答案: