質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1327閲覧

jQuery JavaScript Submit

Z-TALBO

総合スコア525

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/05/26 04:19

編集2017/05/26 04:40

###テストコードと説明
まずは、下記のようなテーブルを作成しました。
○DBから取得したデータを表示させます。
○行数はデータにより変動します。

HTML

1<?php foreach($Test as $T) : ?> 2 <tr> 3 <td>フリガナ</td> 4 <td rowspan="2">情報A</td> 5 <td rowspan="2">情報B</td> 6 <td rowspan="2">情報C</td> 7 </tr> 8 <tr> 9 <td>名前</td> 10 </tr> 11<?php endforeach; ?>

表示に関しては問題ありません。
次に、表示されたテーブルにおいて、情報がある最初の<tr>の部分をクリックすると、clickイベントでsubmitが起こり、idを送信するような動きをしたいと思ったので、とりあえず下記のようにコードを書きました。

HTML

1<?php foreach($Test as $T) : ?> 2 <form action="" method="POST" class="form1"> 3 <tr class="selectRow"> 4 <td>フリガナ</td> 5 <td rowspan="2">情報A</td> 6 <td rowspan="2">情報B</td> 7 <td rowspan="2">情報C</td> 8 <input type="hidden" name="id" value="ID"> 9 </tr> 10 <tr> 11 <td>名前</td> 12 </tr> 13 </form> 14 <?php endforeach; ?>

とりあえず、clickイベントをやってみようと下記の通りjQueryを書きました。

[jQuery] $('#selectRow').click(function(){ $('#form1').submit(); });

受取に関しては

PHP

1$id = filter_input(INPUT_POST, 'id'); 2echo $id;

で表示できればと思います。

###問題点
さて、すでにわかる方ならおわかりかもしれませんが、、、
これでは、送られる値は表のどこをクリックしても、最終行のidしか持ってこれません。

そもそも、「どの行をクリックしたのか?」がわかってもいないからとも思ったのですが、、、
そのあたりの動きに関する部分が勉強不足の為、教えていただければと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

tableやtbody(thead/tfoot)の直下、trの上位にformを置くことはHTML上ありえません。
またtrいかtdと並行してinputタグを置くこともNGです。
またループで処理してるときに同じidを振っていませんか?
idは常にユニークなものをつける必要があります。
ユニークではないidをつけて#idで参照しても動作は保証されません。

さて、今回の件はどこか適当なtdに

<form action="" method="POST" style="display:none"> <input type="hidden" name="id" value="ID"> </form> のようなデータを忍び込ませ

$('tr').on('click',function(){
$(this).find('form').submit();
});

のような処理をいれてください。

投稿2017/05/26 04:28

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Z-TALBO

2017/05/26 04:39

ご指摘、回答ありがとうございます。 inputなど何も考えず平行して置いている場合がありました。 idの問題に関しては、私の勘違いもありました。すみません。 動作に関しては適切に動作が確認できました。 要素と要素の置く場所など、再度勉強していこうと思います。
guest

0

idはHTML内で一意(ユニーク)でないといけません。書かれている内容から、classでよい場所だと思います。

JavaScript

1$('.selectRow').click(function(){ 2 $(this).parent().submit(); 3});

また、table要素の直下にform要素を置くのも文法的に間違っているので、やり方を考え直したほうが良いと思います。

投稿2017/05/26 04:28

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Z-TALBO

2017/05/26 04:37

ご指摘と回答ありがとうございます。 確かにidで振ってしまっていました。。。 実際にはclassですね。 table要素とformの置く場所に関して気をつけます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問