Storing HTML form input in a JS object

Question

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. Here is my HTML form code:

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

I know the proper JSON format needed to post the data to my API. (I tried POSTing with POSTman and I get a status 200, so it works). 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:

<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; to get the values and assign them but I'm getting the syntax error Expected : Comma expected

Not sure if this matters, but this is inside a .NET MVC5 project.

Answer 1

Move your value assignment set of codes inside submitHandler. Check the syntax of 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;
        }
    });