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

formの入力と値のサンプル

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>formの入力と値のサンプル</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     ko.applyBindings(new ViewModel());
  12.   });
  14.   function ViewModel() {
  15.     var self = this;
  17.     // 品名データ
  18.     self.itemData = ko.observableArray([
  19.       {"name": "ねぎ間",         "price": "168"},
  20.       {"name": "ハツ",           "price": "136"},
  21.       {"name": "レバー",         "price": "136"},
  22.       {"name": "ぼんちり",       "price": "136"},
  23.       {"name": "はらみ",         "price": "136"},
  24.       {"name": "うずら玉子",     "price": "136"},
  25.       {"name": "なんこつ",       "price": "136"},
  26.       {"name": "手羽先",         "price": "168"},
  27.       {"name": "せせり",         "price": "136"},
  28.       {"name": "白レバー",       "price": "168"},
  29.       {"name": "丸ごとシマウマ", "price": "290"}
  30.     ]);
  32.     // 品名の初期値
  33.     self.selected = ko.observable(self.itemData()[10]);
  34.     
  35.     // 注文内容
  36.     self.Order = ko.observable();
  37.     self.Item  = ko.computed(function() { return self.selected().name; }, self);
  38.     self.Taste = ko.observable();
  39.     self.Price = ko.computed(function() { return self.selected().price; }, self);
  41.     // オーダーボタンが押されたとき
  42.     self.gotoOrder = function()
  43.     {
  44.       if (this.Order() == undefined)
  45.       {
  46.         orderName = "名無し";
  47.       }
  48.       else
  49.       {
  50.         orderName = this.Order();
  51.       }
  52.       
  53.       if (this.Taste() == undefined)
  54.       {
  55.         orderTaste = "おまかせ";
  56.       }
  57.       else
  58.       {
  59.         orderTaste = this.Taste();
  60.       }
  61.       
  62.       msg = "";
  63.       msg += "注文者：" + orderName    + "\n";
  64.       msg += "商品名：" + this.Item()  + "\n";
  65.       msg += "　味　：" + orderTaste   + "\n";
  66.       msg += "価　格：" + this.Price() + "円\n";
  67.       alert(msg);
  68.     }
  69.     
  70.   }
  71. </script>
  73. <style>
  74.   table
  75.   {
  76.     border-collapse:collapse;
  77.     margin:0;
  78.   }
  80.   th, td
  81.   {
  82.     text-align:left;
  83.     vertical-align:top;
  84.     padding:8px;
  85.     font-weight:normal;
  86.     border:1px solid #ccc;
  87.   }
  89.   th
  90.   {
  91.     background:#f3f3f3;
  92.   }
  93. </style>
  95. </head>
  96. <body>
  98. <h1>formの入力と値のサンプル</h1>
  100. <table>
  101. <tr><th>注文者</th><td><input type="text" data-bind="value: Order" /></td></tr>
  102. <tr><th>商品</th><td><select data-bind="options: itemData, optionsText: 'name', value: selected"></select></td></tr>
  103. <tr><th>味</th>
  104.   <td>
  105.   <label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="たれ" />たれ</label> /
  106.   <label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="塩" />塩</label> /
  107.   <label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="味噌" />味噌</label> /
  108.   <label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="明太子" />明太子</label> /
  109.   <label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="ネギマヨ" />ネギマヨ</label>
  110.   </td>
  111. </tr>
  112. <tr><th>価格</th><td><span data-bind="text: Price"></span> 円</td></tr>
  113. </table>
  115. <div style="margin-top:6px;"><button data-bind="click: gotoOrder">注文</button></div>
  117. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  118. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  119. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  120. </div>
  122. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  123. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  124. </div>
  126. </body>
  127. </html>