Как отправить и получить объект в нокауте JS на Submit?

У меня есть некоторые поля в форме, я хочу отобразить их в виде сетки на другой странице. Каково будет лучшее решение для этого? Или я могу сделать это как одностраничное приложение? вот мой HTML-код

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="knockout-3.1.0.js"></script>
    <link rel="stylesheet" type="text/css" href="wireframe.css"/>

</head>
<body>
<div class="wireframe">
<h3 class="table-head">Table Header</h3>
<div id="addbranchdiv" class="span12">
        <span class=span8>
            <button type="button" class=" button branchbtn" id="brancharea">Branch Areas</button>
        </span>
        <span class="span4">
            <a class=" button branchbtn" id="addbranch" href="wireframe3.html" target="_blank">Add Branch Areas</a> 
        </span>
    </div> 
<div class="container" class="span12">


<div class="table-heading grayhead" >
        <div class="field1">
            <label class="row-label">Name</label>
        </div>
        <div class="field2">
            <label class="row-label">Description</label>
        </div>
        <div class="field3">
            <label class="row-label">Template</label>
        </div>
        <div class="field4">
            <label class="row-label">Meta-Keyword</label>
        </div>
        <div class="field5">
            <label class="row-label">Meta-Description</label>
        </div>
        <div class="field6">
            <label class="row-label">Meta-Title</label>
        </div>
        <div class="field7">
            <label class="row-label">Meta-Enable Search</label>
        </div>
        <div class="field8">
            <label class="row-label">Actions</label>
        </div>
</div>
<div data-bind='foreach: formIndex'>
    <div class="table-row white" >
        <div class="">
            <input data-bind="value:name">
        </div>
        <div class="field2">
            <input data-bind="value:description">
        </div>
        <div class="field3">
            <input data-bind="value:template">
        </div>
        <div class="field4">
            <input data-bind="value:metakeyword">
        </div>
        <div class="field5">
            <input data-bind="value:metadescription">
        </div>
        <div class="field6">
            <input data-bind="value:metatitle">
        </div>

          <span><a href='#' data-bind='click: $root.removeField'>Delete</a></span>
    </div>
    </div>
  <button data-bind='click: addField'>Add Field</button>
    <button data-bind='enable: formIndex().length > 0' type='submit'>Submit</button>    
</div>
<div id="save" class="span12">
        <button type="button"  id="savebtn" class="button"  >Save</button> 
    </div>
</div>

а вот скрипт

<script>
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 });


</script>

Я хочу отправить объект нажатием кнопки "Отправить" и получить его на другой странице. Как это возможно?

Источник

1 ответ

Есть несколько способов сделать это. Самый простой из них - сохранить сетку в том же виде, скрыть форму и показать сетку при нажатии кнопки отправки. Другим способом было бы сохранить информацию, которую вам нужно извлечь, в локальном хранилище (для этого вы можете использовать что-то вроде амплификации js), а затем передать ключ в качестве параметра на другую страницу, извлечь информацию и удалить ключ хранилища, а затем отобразить сетка с соответствующими значениями. Если форма отправляет данные на сервер, сервер может перенаправить на страницу сетки и передать значения (в зависимости от того, как вы отображаете HTML). Надеюсь, это поможет.

Источник
Другие вопросы по тегам