title: How to send and retrieve object in knockout js on submit ?
body: <p>I have some fields in my form i want to display them as a grid on another page. What will be the best solution for it ?
  Or can i do it as one page application ?
  here is my html code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="knockout-3.1.0.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="wireframe.css"/&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wireframe"&gt;
  &lt;h3 class="table-head"&gt;Table Header&lt;/h3&gt;
  &lt;div id="addbranchdiv" class="span12"&gt;
          &lt;span class=span8&gt;
              &lt;button type="button" class=" button branchbtn" id="brancharea"&gt;Branch Areas&lt;/button&gt;
          &lt;/span&gt;
          &lt;span class="span4"&gt;
              &lt;a class=" button branchbtn" id="addbranch" href="wireframe3.html" target="_blank"&gt;Add Branch Areas&lt;/a&gt; 
          &lt;/span&gt;
      &lt;/div&gt; 
  &lt;div class="container" class="span12"&gt;
  
  
  &lt;div class="table-heading grayhead" &gt;
          &lt;div class="field1"&gt;
              &lt;label class="row-label"&gt;Name&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field2"&gt;
              &lt;label class="row-label"&gt;Description&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field3"&gt;
              &lt;label class="row-label"&gt;Template&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field4"&gt;
              &lt;label class="row-label"&gt;Meta-Keyword&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field5"&gt;
              &lt;label class="row-label"&gt;Meta-Description&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field6"&gt;
              &lt;label class="row-label"&gt;Meta-Title&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field7"&gt;
              &lt;label class="row-label"&gt;Meta-Enable Search&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="field8"&gt;
              &lt;label class="row-label"&gt;Actions&lt;/label&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-bind='foreach: formIndex'&gt;
      &lt;div class="table-row white" &gt;
          &lt;div class=""&gt;
              &lt;input data-bind="value:name"&gt;
          &lt;/div&gt;
          &lt;div class="field2"&gt;
              &lt;input data-bind="value:description"&gt;
          &lt;/div&gt;
          &lt;div class="field3"&gt;
              &lt;input data-bind="value:template"&gt;
          &lt;/div&gt;
          &lt;div class="field4"&gt;
              &lt;input data-bind="value:metakeyword"&gt;
          &lt;/div&gt;
          &lt;div class="field5"&gt;
              &lt;input data-bind="value:metadescription"&gt;
          &lt;/div&gt;
          &lt;div class="field6"&gt;
              &lt;input data-bind="value:metatitle"&gt;
          &lt;/div&gt;
  
            &lt;span&gt;&lt;a href='#' data-bind='click: $root.removeField'&gt;Delete&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;button data-bind='click: addField'&gt;Add Field&lt;/button&gt;
      &lt;button data-bind='enable: formIndex().length &gt; 0' type='submit'&gt;Submit&lt;/button&gt;    
  &lt;/div&gt;
  &lt;div id="save" class="span12"&gt;
          &lt;button type="button"  id="savebtn" class="button"  &gt;Save&lt;/button&gt; 
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>
  </p>
  
  <p>and here is script</p>
  
  <pre><code>&lt;script&gt;
  var FormModel = function(formIndex) {
      var self = this;
      self.formIndex = ko.observableArray(formIndex);
  
      self.addField = function() {
          self.formIndex.push({
              name: "",
              description: "",
              template:"",
              metakeyword:"",
              metadescription:"",
              metatitle:"",
          });
      };
  
      self.removeField = function(field) {
          self.formIndex.remove(field);
      };
  
      self.save = function(form) {
          alert("Could now transmit to server: " + ko.utils.stringifyJson(self.formIndex));
          // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.formIndex);
      };
  };
  
  var viewModel = new FormModel([
      { name: "Tall Hat", description: "39.95",template: "12",metakeyword:"meta",metadescription:"",metatitle:"metatitle"},
      { name: "Long Cloak", description: "120.00",template:"12",metakeyword:"meta",metadescription:"",metatitle:"metatitle"},
        { name: "Tall Hat", description: "39.95",template: "12",metakeyword:"meta",metadescription:"",metatitle:"metatitle"},
      { name: "Long Cloak", description: "120.00",template:"12",metakeyword:"meta",metadescription:"",metatitle:"metatitle"}
  ]);
  ko.applyBindings(viewModel);
  
  // Activate jQuery Validation
  $("form").validate({ submitHandler: viewModel.save });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to send object on click of submit and retrieve it on another page how can it possible ?</p>