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

formでEnterキーで送信

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>formでEnterキーで送信</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]);
  35.     // 注文内容
  36.     self.Order = ko.observable();
  37.     self.Item  = ko.computed(function() { return self.selected().name; }, self);
  38.     self.Price = ko.computed(function() { return self.selected().price; }, self);
  40.     // オーダーボタンが押されたとき
  41.     self.gotoOrder = function(formData)
  42.     {
  43.       msg = "";
  44.       msg += "注文者：" + "\n";
  45.       msg += "this.Order()：" + this.Order() + "\n";
  46.       // ▼firefoxだととれないっぽい
  47.       //msg += 'formData.elements["order"].value：' + formData.elements["order"].value + "\n";
  48.       
  49.       msg += "商品名：" + "\n";
  50.       msg += 'this.Item()：' + this.Item() + "\n";
  51.       // ▼firefoxだととれないっぽい
  52.       //msg += 'formData.elements["item"].selectedOptions[0].text：' + formData.elements["item"].selectedOptions[0].text + "\n";
  53.       
  54.       msg += "単価：" + "\n";
  55.       msg += 'this.Price()：' + this.Price() + "\n";
  56.       alert(msg);
  57.     }
  58.   }
  59. </script>
  61. <style>
  62.   table
  63.   {
  64.     border-collapse:collapse;
  65.     margin:0;
  66.   }
  68.   th, td
  69.   {
  70.     text-align:left;
  71.     vertical-align:top;
  72.     padding:8px;
  73.     font-weight:normal;
  74.     border:1px solid #ccc;
  75.   }
  77.   th
  78.   {
  79.     background:#f3f3f3;
  80.   }
  81. </style>
  83. </head>
  84. <body>
  86. <h1>formでEnterキーで送信</h1>
  89. <form data-bind="submit: gotoOrder">
  90. <table>
  91. <tr><th>注文者</th><td><input type="text" name="order" data-bind="value: Order, valueUpdate: 'afterkeydown'" /></td></tr>
  92. <tr><th>商品</th><td><select name="item" data-bind="options: itemData, optionsText: 'name', value: selected"></select></td></tr>
  93. </table>
  95. <div style="margin-top:6px;"><input type="submit" value="注文" /></div>
  96. </form>
  98. ko.computed()やafterkeydownなどしておかないと先に送信イベントが走って値が取れない。引数を渡して無理矢理取得するってのもアリだけど、knockout.jsを使ってるんでそういうのはヤメたほうが良いと思う。ブラウザによっては取得できないこともあるしね。
  100. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  101. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  102. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  103. </div>
  105. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  106. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  107. </div>
  109. </body>
  110. </html>