weired problem of clearing input box in knockout js.

[rjia...@gmail.com]

Hi,

  I am having a problem clearing the input box in knockout js.

  Here is what I did. First, I created two divs, one is called "createMode2" which is used to insert customer info. and other div called "displayMode2" used to show all the customers. Everything is working except clearing the input boxes in div "createMode2".

  Here is the code.

  This is the tables shows the customer list.

<table>

    <thead>

        <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Age</th>

            <th>Comments</th>

            <th></th>

            <th></th>

        </tr>

    </thead>

    <tbody data-bind="foreach: customers">

        <tr>

            <td data-bind="text: Id"></td>

            <td data-bind="text: Name"></td>

            <td data-bind="text: Age"></td>

            <td data-bind="text: Comment"></td>

            <td><button data-bind="click: $root.deleteCustomer" >Delete</button></td>

        </tr>

    </tbody>

</table>

And this is the table for input

<table>

    <tr>

        <td>Name</td>

        <td>

            <input type="text" data-bind="value: Name" id="txt_Name"/></td>

    </tr>

    <tr>

        <td>Age</td>

        <td>

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

    </tr>

    <tr>

        <td>Comments</td>

        <td>

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

    </tr>

</table>

<input type="button" value="Add" data-bind="click: $data.addCustomer" />

And this is the script.

/// <reference path="../Scripts/jquery-1.8.2.js>

/// <reference path="../Scripts/knockout-2.2.0.js>

$(document).ready(function () {

    var cusVM = new customerViewModel();

    ko.applyBindings(cusVM, document.getElementById("displayMode2"));

    ko.applyBindings(cusVM, document.getElementById("createMode2"));

});

function customerViewModel() {

    var self = this;

    self.Name = ko.observable();

    self.Id = ko.observable();

    self.Age = ko.observable();

    self.Comment = ko.observable();

    self.customers = ko.observableArray();

    var customerData = {

        Id: self.Id,

        Name: self.Name,

        Age: self.Age,

        Comment: self.Comment

    };

  

    GetCustomers();

    function GetCustomers() {

        $.ajax({

            type: "GET",

            url: "/api/customer",

            contentType: "application/json;charset=utf-8",

            dataType: "json",

            success: function (data) {

                self.customers(data);

            },

            error: function (error) {

                alert(error.status);

            }

        });

    }

    //$.getJSON("/api/customer", self.customers);

    self.addCustomer = (function () {

       

        $.ajax({

            type: "POST",

            url: "/api/customer",

            contentType: "application/json",

            data: ko.toJSON(customerData),

            success: function (data) {

                GetCustomers();

            },

            error: function (error) {

                alert(error.status);

            }

        });

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

    });

    self.deleteCustomer = (function (customer) {

        var cfrm = confirm("Are you sure you want to delete?");

        if (cfrm == true) {

            $.ajax({

                type: "DELETE",

                url: "/api/customer/" + customer.Id,

                success: function (data) {

                    //alert(customer.Id + " is deleted");

                    GetCustomers();

                },

                error: function (error) {

                    alert(error.status);

                }

            });

        }

    });

}

 in self.addCustomer, in $.ajax.success, after GetCustomers(), I want to clear all the input boxes in "createMode2".

 These are the thing I have tried.

  1. Create a new object for customerViewModel and ko binding the "createMode2" div.

      Not working, It clears, but it inserts more records when you add again.

   2. specifically document.getElementById("inputbox_id").value = "", 

      Not working, it clears when you type in the input box again, and you have to type it again. and also it inserts more records when you add again.

   3.  self.Name = ko.observable("");

      Not working. Sometimes, it clears, but once you add again, it never saves the new value, it saves the old value even there is no value in the input box.

Please help.

Thank you in advance.  

   

[Rachel Silver]

Try doing this when you'd like to clear your inputs - 

self.Name("");

self.Age("");

self.Comments("");

Here's a super basic fiddle - 

http://jsfiddle.net/Y4we6/12/