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.

First glance, you need to stringify the data before sending JSON.stringify(vm) — StudioTime
– StudioTime, Commented Mar 16, 2018 at 10:00
@DarrenSweeney No you don't need to stringify data for an jquery ajax request. — baao
– baao, Commented Mar 16, 2018 at 10:01
validate({ ... - you are passing an object to validate, an object literal needs to have key: value pairs. You are trying to write normal code instead. vm.auction... — baao
– baao, Commented Mar 16, 2018 at 10:04
You see this code line var validator = $("#newAuction").validate({, you are creating an object, so in that you have to follow object syntax. No ; allowed. — Bharadwaj
– Bharadwaj, Commented Mar 16, 2018 at 10:04
Because the documentation says so @DarrenSweeney. Yeah, he's trying to recreate the JSON format, but the error is totally different from what his question is asking for — baao
– baao, Commented Mar 16, 2018 at 10:04

Ininiv · Accepted Answer · 2018-03-16 10:12:08Z

2

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

answered Mar 16, 2018 at 10:12

Ininiv

1,3257 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hkjhadj1 Over a year ago

Thanks! That fixed it. But now I am getting an other error. When I press the submit button, I get this error in the console New:92 Uncaught TypeError: Cannot set property 'Title' of undefined Am I declaring the vm object wrong? It's supposed to have two properties in it. First is the Auctionobject. Auction will have following properties: Title, MinBid, EDate and then theres the second property of vm, the productIds array. Its a simple array that stores 1,2,3 etc

Ininiv Over a year ago

Initialize vm.auction = {} before using it;

hkjhadj1 Over a year ago

That's it! Thanks!

Collectives™ on Stack Overflow

Storing HTML form input in a JS object

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related