読者です 読者をやめる 読者になる 読者になる

TakayukiKoyama Geek Blog

Create, Entertain, Experience

<table>タグの入力フォームでsubmitが実行(送信)されない

WEBプログラマーではないので、世間では常識なのかもしれないがメモ。

HerokuではじめるRailsプログラミング入門

HerokuではじめるRailsプログラミング入門

 上記の本でHeroku(RoR)の勉強をしてるのだが、5-4の「updateアクションを用意しよう」の通りにhtmlタグを書いていたら、submitが動かなかった。

症状

 indexページにDBのデータ一覧を表示させて、あるレコードを更新するときはupdateページに遷移してデータを更新するというプログラムで問題が発生した。ひとまず、本節に書いてあるようにhtmlタグを書いてみる。

書籍よりプログラム一部引用:

<table>
<form method="post" action="/sample/update">
<tr><th>ID</th><td><%= @result.id %></td></tr>
<tr><th>Age</th><td><input type="text" name="age" value="<%= @result.age %>"></td></tr>
(中略...)
<tr><th></th><td><input type="submit" value="送信"></td></tr>
</form>
<table>

 プログラムを書いて、indexページから遷移して送信ボタンを押しても何も反応しない。ただ、updateページ上で一度、F5(ページ更新)してから送信ボタンを押すと実行される。

 なぜ...

とりあえず、ググる

メソ知恵/HTML/submitの値が送信されない - メソラボ

 上記のサイトによると、

<form>内にtype="submit"以外の<input>が1つしかない場合、
<input type="submit">の内容は送信されない

 とのことらしい。

 いや、でもage,name,mail,tel,submitの5つのinputタグを囲ってるつもりだけど...

ソースコードを調べる

 Chrome:右上の設定ボタン > [ツール] > [デベロッパーツール] (Shift+Ctrl+I)

<table>
    <form method="post" action="/sample/update"></form>
    <tbody><tr><th>ID</th><td>2</td></tr>
    <tr><th>Age</th><td><input type="text" name="age" value="25"></td></tr>
    <tr><th></th><td><input type="submit" value="送信"></td></tr>
</tbody></table>

 あれ、formタグがinputタグ囲ってない...

 じゃあtableタグをformで囲うか。というか、レコード新規作成のプログラムはそうなってるね。

<form method="post" action="/sample/update">
<table>
<tr><th>ID</th><td><%= @result.id %></td></tr>
<tr><th>Age</th><td><input type="text" name="age" value="<%= @result.age %>"></td></tr>
(中略...)
<tr><th></th><td><input type="submit" value="送信"></td></tr>
<table>
</form>

 デベロッパーツールでチェック。

<form method="post" action="/sample/update">
<table>
    <tbody><tr><th>ID</th><td>2</td></tr>
    <tr><th>Age</th><td><input type="text" name="age" value="25"></td></tr>
    <tr><th></th><td><input type="submit" value="送信"></td></tr>
</tbody></table>
</form>

 動作も問題なし。

まとめ

 formタグはtableタグを囲わないといけない、と。

広告を非表示にする