Adding the text in a text box to a database table using OData and Knockout Js

Question

I am trying to add a value in some drop downs and text boxes to a table in sql database. Its works fine with the drop downs but with textboxes it adds NULL values to the table columns even though I have entered the values in the textboxes

HTML

<td>

                <select data-bind="options: $root.locationNames, optionsText: 'LocationName', optionsValue: 'LocationName', value: selectedLocation, optionsCaption: 'Location'">
                </select>
            </td>

            <td>

                <select data-bind="options: $root.pipelineNames, optionsText: 'PipelineName', optionsValue: 'PipelineName', value: selectedPipeline, optionsCaption: 'Pipeline'">
                </select>
            </td>


            <td>

                <select data-bind="options: $root.counterpartyNames, optionsText: 'CounterPartyName', optionsValue: 'CounterPartyName', value: selectedBidCounterParty, optionsCaption: 'Bid CP'">
                </select>
            </td>

<td>
                <input type="text" name="bidVolume" data-bind="value: $root.BidVolume"/>
            </td>

            <td>
                <input type="text" name="bid" data-bind="value: $root.Bid"/>
            </td>

            <td>
                <input type="text" name="offer" data-bind="value: $root.Offer"/>
            </td>

            <td>
                <input type="text" name="offerVolume" data-bind="value: $root.OfferVolume"/>
            </td>
<td >
                <input type="button" class="btn btn-success" data-bind="click: add, enable: selectedChoice" value="Add New Entry" />
            </td>

Knockout Js with OData

self.selectedChoice = ko.observable();
    self.selectedTerm = ko.observable();
    self.selectedLocation = ko.observable();
    self.selectedPipeline = ko.observable();
    self.selectedIndex = ko.observable();
    self.selectedBidCounterParty = ko.observable();
    self.selectedOfferCounterParty = ko.observable();

    self.bidVolume = ko.observable();
    self.bid = ko.observable();
    self.offer = ko.observable();
    self.offerVolume = ko.observable();



    self.add = function (canadiancrude) {
        var payload = {
            Term: this.selectedTerm(), Product: this.selectedChoice(), Location: this.selectedLocation(), Pipeline: this.selectedPipeline(),
            BidCP: this.selectedBidCounterParty(), BidVolume: this.bidVolume(), Index: this.selectedIndex(), Bid: this.bid(), Offer: this.offer(),
            OfferVolume: this.offerVolume(), OfferCP: this.selectedOfferCounterParty()//, Locked: "0", Sequence: "", TermID: "0"
        };
        $.ajax({
            url: '/odata/Canadiancrudes',
            type: 'POST',
            //  data: ko.toJSON(payload),
            data: JSON.stringify(payload),
            contentType: 'application/json',
            dataType: 'json'
        });
    }

May I know where I am making a mistake in that?

Answer 1

Small mistake in binding data corrected and is as follows

        <td>
            <input type="text"  data-bind="value: bid"/>
        </td>

        <td>
            <input type="text"  data-bind="value: offer"/>
        </td>

        <td>
            <input type="text" data-bind="value: offerVolume"/>
        </td>