「formで入力・確認・終了画面の切替」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

formで入力・確認・終了画面の切替

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>formで入力・確認・終了画面の切替</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
function ViewModel() {
var self = this;
self.statusOrder = ko.observable("Edit");
// 品名データ
self.itemData = ko.observableArray([
{"name": "ねぎ間", "price": "168"},
{"name": "ハツ", "price": "136"},
{"name": "レバー", "price": "136"},
{"name": "ぼんちり", "price": "136"},
{"name": "はらみ", "price": "136"},
{"name": "うずら玉子", "price": "136"},
{"name": "なんこつ", "price": "136"},
{"name": "手羽先", "price": "168"},
{"name": "せせり", "price": "136"},
{"name": "白レバー", "price": "168"},
{"name": "丸ごとシマウマ", "price": "290"}
]);
// 品名の初期値
self.selected = ko.observable(self.itemData()[10]);
// 注文内容
self.Order = ko.observable();
self.Item = ko.computed(function() { return self.selected().name; }, self);
self.Price = ko.computed(function() { return self.selected().price; }, self);
// 「確認」ボタンが押されたとき
self.gotoOrder = function()
{
self.statusOrder("Confirm");
}
// 「やりなおす」ボタンが押されたとき
self.gotoEdit = function()
{
self.statusOrder("Edit");
}
// 「確定」ボタンが押されたとき
self.gotoConfirm = function()
{
self.statusOrder("Decision");
}
}
</script>
<style>
table
{
border-collapse:collapse;
margin:0;
}
th, td
{
text-align:left;
vertical-align:top;
padding:8px;
font-weight:normal;
border:1px solid #ccc;
}
th
{
background:#f3f3f3;
}
</style>
</head>
<body>
<h1>formで入力・確認・終了画面の切替</h1>
<form data-bind="submit: gotoOrder">
<table>
<tr><th>注文者</th><td><input type="text" name="order" data-bind="value: Order, valueUpdate: 'afterkeydown'" /></td></tr>
<tr><th>商品</th><td><select name="item" data-bind="options: itemData, optionsText: 'name', value: selected"></select></td></tr>
<tr><th>単価（円）</th><td data-bind="text: Price"></td></tr>
</table>
<div style="margin-top:6px;">
<button type="submit">確認</button>
</div>
</form>
<form>
<table>
<tr><th>注文者</th><td data-bind="text: Order"></td></tr>
<tr><th>商品</th><td data-bind="text: Item"></td></tr>
<tr><th>単価（円）</th><td data-bind="text: Price"></td></tr>
</table>
<div style="margin-top:6px;">
<button data-bind="click: gotoEdit">やりなおす</button>
<button data-bind="click: gotoConfirm">確定</button>
</div>
</form>
<div style="font-size:1.2em;color:red;">下記で確定いたしました。</div>
<table>
<tr><th>注文者</th><td data-bind="text: Order"></td></tr>
<tr><th>商品</th><td data-bind="text: Item"></td></tr>
<tr><th>単価（円）</th><td data-bind="text: Price"></td></tr>
</table>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>