CODEWITHSUNDEEP
jsonknockout.js
MSH
MSH

Reputation: 93

Updating the JSON file with Knockout.js

I am very new to programming in general and Knockout.js therefore what I ask would be very basic. I am trying to make a form with Knockout.js. Just as practice I want to make this page in which everytime someone update the fields and click submit it map it to JSON and alert how it will look like as JSON. By this code that I have it binds properly but it doesn't update the JSON file. What's wrong with it?

Here are my codes:

var User = {
Email : ko.observable(''),
Password : ko.observable(''),
FullName : ko.observable('')
};


ko.applyBindings(User);

var JsonData=ko.toJSON(User);


function submit(){
alert (JsonData)
 }

and my html:

<html>
<head>
<title> Test Knockout</title>
</head>
<script src="knockout-3.1.0.js" type="text/Javascript"></script>
<script src="js/jquery-2.1.0.min.js" type="text/Javascript"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

 <body>

<form data-bind="submit: submit" data-bind="foreach:friends">
<!--==Email==-->
<div class="form-group">
<input type="Email" class="form-control input-lg" placeholder="*Email" data- bind="value:Email">
<input type="password" class="form-control input-lg" placeholder="*Password" data-bind="value:Password">
<input type="text" name="FullName" id="FullName" class="form-control input-lg" placeholder="Full Name" data-bind="value:FullName">
<button type="submit">Submit</button>
<p data-bind="text:Email"></p>
<p data-bind="text:Password"></p>
<p data-bind="text:FullName"></p>
</div>
</form>
<script src="Jav.js" type="text/Javascript"></script>
<script src="knockout.mapping-latest.js" type="text/Javascript"></script>
</body>
 </html>

Thanks

Upvotes: 0

Views: 320

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

here's a working fiddle of your code: http://jsfiddle.net/dwqZw/1/

html:

<form data-bind="submit: submit">
    <!--==Email==-->
    <div class="form-group">
        <input type="Email" class="form-control input-lg" placeholder="*Email" data-bind="value: user.Email, valueUpdate: 'input'" />
        <input type="password" class="form-control input-lg" placeholder="*Password" data-bind="value: user.Password, valueUpdate: 'input'" />
        <input type="text" name="FullName" id="FullName" class="form-control input-lg" placeholder="Full Name" data-bind="value: user.FullName, valueUpdate: 'input'" />
        <button type="button" data-bind="click: submit">Submit</button>
        <p data-bind="text: user.Email"></p>
        <p data-bind="text: user.Password"></p>
        <p data-bind="text: user.FullName"></p>
    </div>
</form>

javascript:

var user = {
    Email: ko.observable(''),
    Password: ko.observable(''),
    FullName: ko.observable(''),
};

function submit() {
    var json = ko.toJSON(user);
    alert(json);
}

var viewModel = {
    user: user,
    submit: submit
};

ko.applyBindings(viewModel);

Upvotes: 2

Related Questions