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

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

无论如何，我想将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>

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

$（文档）.ready（函数（）{
var vm={
拍卖：{}，
productId:[]
};
//验证和发布到api
var validator=$（“#新拍卖”）.validate({
//赋值
vm.auction.Title=document.getElementById（'Title'）。值；
vm.auction.MinBid=document.getElementById（'MinBid'）.value；
vm.auction.EDate=document.getElementById（'EDate'）.value；
vm.productIds.push（1）；
submitHandler:函数（）{
$.ajax({
url:“/api/newAuction”，
方法：“张贴”，
数据：虚拟机
})
.done（函数（）{
toastr.success（“将拍卖添加到db中”）；
//将vm设置为新vm以除去旧值
var vm={auction:{}，productid:[]}；
validator.resetForm（）；
})
.fail（函数（）{
犯错误（“出了什么事”）；
});
返回false；
}
});
});

如您所见，我使用的是

document.getElementById（'title'）.value

获取值并分配它们，但我得到语法错误

应为：逗号应为

---

不确定这是否重要，但这是在.NETMVC5项目中

将您的赋值代码集移动到submitHandler中。检查validate（）的语法

---

将您的值分配代码集移动到submitHandler中。检查validate（）的语法

---

乍一看，在发送JSON.stringify（vm）@DarrenSweeney否之前，您需要对数据进行字符串化。您不需要为jquery ajax请求对数据进行字符串化。

validate({…

-您正在传递一个要验证的对象，对象文本需要有

键：值

对。您正在尝试编写普通代码。

vm.auction…

您会看到以下代码行

var validator=$（“#newAuction”）。验证({

，您正在创建一个对象，因此您必须遵循对象语法。不允许使用

；

。因为文档上说是这样@DarrenSweeney。是的，他正在尝试重新创建JSON格式，但错误与他的问题所要求的完全不同，您需要在发送

JSON.s之前对数据进行字符串化tringify（vm）

@DarrenSweeney不，您不需要为jquery ajax请求对数据进行字符串化。

validate（{…

）-您正在传递一个要验证的对象，一个对象文本需要有

key:value

对。您正在尝试编写普通代码。

vm.auction…

您看到这行代码

var validator=$(“#新拍卖”）。验证({

，您正在创建一个对象，因此您必须遵循对象语法。不允许使用

；

。因为文档上说是这样@DarrenSweeney。是的，他试图重新创建JSON格式，但错误与他问的问题完全不同！这就解决了问题。但现在我遇到了另一个错误。当我按下“提交”按钮，我在控制台中收到此错误

New:92未捕获类型错误：无法设置未定义的属性“Title”

我是否声明

vm

对象错误？它应该有两个属性。第一个是

拍卖

对象。

拍卖

将有以下属性：

标题

，

MinBid

，

EDate

，然后是

vm

的第二个属性，

productIds

数组。它是一个简单的数组，存储1,2,3 etcinInitialize vm.auction={}在使用它之前；就是这样！谢谢！谢谢！修复了它。但是现在我得到了另一个错误。当我按下提交按钮时，我在控制台中得到了这个错误

New:92 Uncaught TypeError:Cannot set property'Title'of undefined

我是否声明了

vm

对象错误？它应该有两个属性。第一个是

Auction

对象。

Auction

将具有以下属性：

Title

，

MinBid

，

EDate

，然后是

vm

的第二个属性，

productIds

数组。它是一个简单的数组，存储1,2,3 etcinInitialize vm.Auction={}，然后再使用它；就是它了！谢谢！

<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>

    //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;
        }
    });