CODEWITHSUNDEEP
javascriptknockout.js
user1443519
user1443519

Reputation: 589

Knockout.JS declaring variable as observable not working correctly

I'm trying to declare the variables for some inputs as observables but it's not working properly. The form loads properly, however when I submit the form the values are just javascript code.

Here is the form

<div data-bind="visible: shippingBillingContact()">
    <table border="1">
        <tr><td>Full Name</td><td><input type="text" data-bind='value: fullName'/></td>
        <tr><td>Address Line 1</td><td><input type="text" data-bind='value: addressLine1'/></td>
        <tr><td>Address Line 2</td><td><input type="text" data-bind='value: addressLine2'/></td>
        <tr><td>City</td><td><input type="text" data-bind='value: city'/></td>
        <tr><td>State</td><td><input type="text" data-bind='value: state'/></td>
        <tr><td>ZIP</td><td><input type="text" data-bind='value: ZIP'/></td>
        <tr><td>Email</td><td><input type="text" data-bind='value: email'/></td>
    </table>
    <button data-bind="click: back">Go Back</button>
    <br>
    <button data-bind="click: submitOrder">Submit</button>
</div>

Here's the viewmodel where I declare the variables. No other processing is done to them

function EntryViewModel(fullName, addressLine1, addressLine2, city, state, ZIP, email) {
    var self = this;
    self.newItem = ko.observable("");
    //fullName through email are the items giving me problems
    self.fullName = ko.observable();
    self.addressLine1 = ko.observable();
    self.addressLine2 = ko.observable();
    self.city = ko.observable();
    self.state = ko.observable();
    self.ZIP = ko.observable();
    self.email = ko.observable();

    //these are used to show/hide divs (work properly)
    self.cartContents = ko.observable(true);
    self.shippingBillingContact = ko.observable(false);
    self.orderComplete = ko.observable(false);

    //start the array with some items
    self.itemNumbers = ko.observableArray([

    ]);

    //the values for ItemNumbers, quantities, prices, names are all looked up
    //I omitted this code because it in no way interacts with the customer information

    $.getJSON("/orders/submit_order/" + itemNumbers + "/" + quantities + "/" + prices + "/" + productNames + "/" + self.fullName + "/" + self.addressLine1 + "/" + self.addressLine2 + "/" + self.city + "/" + self.state + "/" + self.ZIP + "/" + self.email,function(data) {
            if(data.check == "success"){
                self.shippingBillingContact(!self.shippingBillingContact()); //hide the shipping form
                self.orderComplete(!self.orderComplete()); //show the order complete form and display the order
            }
            else{
                alert('Price Mismatch. If you believe this was an error please re-add the items');
                self.cartContents(!self.cartContents());
                self.shippingBillingContact(!self.shippingBillingContact()); //hide the shipping form
            }
        });

So the URL shows something like this. As you can see the items information is displayed just fine, but the customer information is a bunch of javascript.

orders/submit_order/1/1/5.99/ItemA/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D/function%20d()%7Bif(0%3Carguments.length)%7Bif(!d.equalityComparer%7C%7C!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return%20this%7Db.r.Wa(d);return%20c%7D

I also tried the following variations but neither worked

self.fullName = ko.observable("");
self.fullName = ko.observable(fullName);

Upvotes: 1

Views: 2094

Answers (1)

bert
bert

Reputation: 466

You must call observables as function: self.city() instead of self.city ...

Upvotes: 5

Related Questions