Edit functionality in form using knockout js

Question

Hi i am working on a form using knockout js i have to perform CRUD operation. Out of these i am able to do all except update(edit). I want on click of edit same form will open as open on click on addperson but with the values of person. here is my code

<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="knockout-3.1.0.js"></script>
</head>
<body>
<a href="#" data-bind="click:addFields">ADDPerson</a>
<a href="#" data-bind="click:resetPerson">Reset</a>
    <div data-bind="foreach:fields,visible:show">
        <div data-bind="text:firstName"></div>
        <div data-bind="text:lastName"></div>
        <a href="#" data-bind="click:$root.remove">Remove</a>
        <a href="#" data-bind="click:$root.edit" >edit</a>
    </div>
<form data-bind="visible:showfields">
    First Name: 
    <input data-bind="value:formFirstName"/>
    Last Name:
    <input data-bind="value:formLastName"/> 
    <a href="#" data-bind="click:addPerson">ADD</a>
</form>
<body>
<script>
function person(firstName, lastName) {
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);

}

function personForm(formFirstName, formFirstName) {
    var self = this;
    self.formFirstName = ko.observable("david");
    self.formLastName = ko.observable("rock");
}

function personViewModel() {
    var self = this;
    self.formFirstName = ko.observable("add");
    self.formLastName = ko.observable("Value");
    self.show = ko.observable(true);
    self.showfields = ko.observable(false);
    self.fields = ko.observableArray([
        new person("paul", "kerry"),
        new person("john", "cena")
    ]);
    self.addFields = function() {
        self.show(false);
        self.showfields(true);
    };
    self.addPerson = function() {
        self.fields.push(new person(self.formFirstName(), self.formLastName()));
        self.show(true);
        self.showfields(false);
    }
    self.resetPerson = function() {
        self.fields.removeAll();
        self.fields.push(new person("john", "cena"));
        self.fields.push(new person("abc", "def"));
    }
    self.remove = function(person) {
        self.fields.remove(person);
    }
}

ko.applyBindings(new personViewModel());
</script>
</html>

score 1 · Accepted Answer · answered Aug 07 '14 at 09:01

Here is a complete solution. i have made some modifications.

View

<a href="#" data-bind="click:addFields">ADDPerson</a> 
<br>
<a href="#" data-bind="click:resetPerson">Reset</a>
<br>
<div data-bind="foreach:fields,visible:show">
    <div data-bind="text:firstName"></div>
    <div data-bind="text:lastName"></div>
    <a href="#" data-bind="click:$root.remove">Remove</a>
    <a href="#" data-bind="click:$root.edit">edit</a>
</div>
<form data-bind="visible:showfields">First Name:
    <input data-bind="value:formFirstName" />Last Name:
    <input data-bind="value:formLastName" />
    <a href="#" data-bind="click:addPerson,text:actionTitle"></a>
</form>

Model

function person(firstName, lastName) {
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);
}

function personViewModel() {
    var self = this;
    self.formFirstName = ko.observable("add");
    self.formLastName = ko.observable("Value");
    self.show = ko.observable(true);
    self.showfields = ko.observable(false);
    self.flag = ko.observable(false)
    self.actionTitle = ko.observable('Add')
    self.editPerson = ko.observable()
    self.fields = ko.observableArray([
    new person("paul", "kerry"),
    new person("john", "cena")]);
    self.addFields = function () {
        self.show(false);
        self.showfields(true);
        self.flag(false)
        self.actionTitle('Add')
    };
    self.addPerson = function () {
        if (self.flag()) {
            self.editPerson().firstName(self.formFirstName())
            self.editPerson().lastName(self.formLastName())
            self.flag(false)
        } else {
            self.fields.push(new person(self.formFirstName(), self.formLastName()));
        }
        self.show(true);
        self.showfields(false);
    }
    self.resetPerson = function () {
        self.fields.removeAll();
        self.fields.push(new person("karan", "bhardwaj"));
        self.fields.push(new person("dipankar", "gupta"));
    }

    self.edit = function (person) {
        self.editPerson(person)
        self.formFirstName(person.firstName())
        self.formLastName(person.lastName())
        self.showfields(true)
        self.flag(true)
        self.actionTitle('Edit')
    }
    self.remove = function (person) {
        self.fields.remove(person);
    }
}

ko.applyBindings(new personViewModel());

Fiddle Demo

There is one issue in it when i click on edit and then click on add person then it shows the value of a person on which i click previously. and if i want a option of cancel in both edit and cancel i have to pass null for that ? — user2142786, Aug 07 '14 at 10:08
for this you can go through [this](http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html) post — Muhammad Raheel, Aug 07 '14 at 10:28

Rahul Patil · Answer 2 · 2014-08-07T11:06:01.110

0

Here's how you can update existing model :

Create new observable :

self.editForm = ko.observable(); //This will hold selected person object which you want to edit

Create new function for edit :

self.edit = function(person){

    self.editForm(person); //populate selected object to edit in edit form

}

Wire up HTML :

<form data-bind="visible:showEdit, with: editForm">
    First Name: 
    <input data-bind="value:firstName"/>
    Last Name:
    <input data-bind="value:lastName"/> 
</form>

Why create new observable? -

Answer - All the edits you make will be updated in realtime, you won't have to hit UPDATE like button :-)

I hope that clears..

Updated demo with single form : http://jsfiddle.net/rahulrulez/7f7hsj8w/2/

edited Aug 07 '14 at 11:06

answered Aug 07 '14 at 09:01

Rahul Patil

5,656
6
37
65

i want to use same form for add and edit functionality – user2142786 Aug 07 '14 at 10:52
@user2142786 I have updated the demo : http://jsfiddle.net/rahulrulez/7f7hsj8w/2/ please check :-) upvote and check as an answer if you think I helped. Let's help community – Rahul Patil Aug 07 '14 at 11:06
Hi Rahul, there are two issue like if i click on edit button and then click on add the input field come with the some values. they are not appearing blank. secondly when i click on edit there is no option of save n cancel – user2142786 Aug 07 '14 at 11:28
Hi Rahul here is another question for you http://stackoverflow.com/questions/25306449/how-to-pass-value-from-one-view-model-to-another-viewmodel-in-knockout-js – user2142786 Aug 14 '14 at 11:35

score 0 · Answer 3 · answered Nov 17 '17 at 06:22

0

If you want to edit the form in place. Kind of like asp.net webform style.

The simple way is to has the input disabled initially. Then have the edit button to enable the inputs. Hope this helps.

answered Nov 17 '17 at 06:22

Kun Li

91
1
1
8

Edit functionality in form using knockout js

3 Answers3

Fiddle Demo

Linked