電子書籍の厳選無料作品が豊富！

おしえて

PHP table内、<a href使って submitボタンではなくJavaScriptでPOST

解決済

  • 質問者：x201s-goo
  • 質問日時：
  • 回答数：2件

データベースから一覧表示した後、ある行のある列をクリックして指定した「キー」でさらに詳細データ表示する方法で、GETの場合簡単でできました。以下、テーブル内の一部コード：

<table>

<?php
foreach( $result as $row ) { ?>

<tr>
<td>
　　　　　　<a href='showDetails.php?key=<?php echo $row['recID']?>'>
　　　　　　<?php echo $row['title']?></a>
　　　</td>
</tr>
<?php
}?>
</table>

ようは、行のタイトルをクリックすると、紐づいたrecIDを「キー」としてshowDetails.phpに渡されるし、その「キー」で詳細データ検索出来て表示される。

問題は、上記文を、POSTを使って、かつ、
<input name="submit" type="submit" />
使わないで、<a href=...>のままで実現したい。

ググってみると国内外のサイトで、<td></td>内にフォームのhiddenタグ"を使って、お渡ししたい項目のvalue属性指定し、JavaScriptでsubmitすれば出来そうと書いていました。

早速サンプル作ってみましたが、POSTで渡されるのはいつも（ごの行をクリックしても）一番先頭の値のみです。

foreach( $result as $row ) {の中......

<td>

<form method="post" name="form1" action="showDetails.php">

<input type="hidden" name="recNo" value=<?php echo $row["recNo"]; ?> >

<a href="javascript: void(0)"
onclick="document.forms[0].submit(); return false;"><?php echo $row["title"]; ?></a>
</form>
</td>



サンプルデータ：

RecID Title
-----------------
1 あ行
2 か行
3 さ行
4 た行
など。

あ行のハイパーリンクにクリックした時にRecIDは「1」、か行のハイパーリンクにクリックした時にRecIDは「2」など渡したいんです。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です。



＞テーブルのタイトル列にハイパーリンクを見せながら、
＞そこをクリックしてshowDetail.phpにクリックした行のIDを渡したいです。
「タイトル列」というのは各行の1列目の意味でしょうか？
　あるいは何かの特別なセル群を意味しているのでしょうか？
いずれにしろ、No1のサンプルはあくまでも「方法も例」でしかありませんので、表内のtd要素全てがクリックの対象になっています。（=td要素であることのチェックしか行っていません）
対象を絞りたいのであれば、その対象であることのチェックを行う必要があります。
（そうでないと、意図する以外の要素をクリックしても送信・遷移してしまいます）
（ No1で例示のスクリプトの意味は、No1に記した説明の通りです）

＞<a href=..>で実現する方法がお分かりであれば助かります。
そういう可能性もあろうかと思いましたので、方法についてもNo1に記しておいたつもりです。
（いずれにしろ、全体の構成など不明点がいろいろあるので方法論ですが）

一方で、もしかすると
＞見た目は各行のtitleにunderlineついて、ハイパーリンクも出ていますが～
という見え方にしたいためにリンク要素を用いているのであれば、No1のHTMLでCSSに
　#hoge td {
　　color: blue;
　　text-decoration: underline;
　　cursor: pointer;
　}
といった内容を指定することで、見た目にはカーソルがポインタで、アンダーライン付きの表示とすることは可能です。
（こちらの例も全部のtdを対象にした記述です。部分に限定するならその旨の記述が必要です）


＞「dataset.id」で　「data-id」の値が取得できる、このように、
＞属性名が一致しなくてもとれる？
＞又はそのような理解は正しくないということでしょうか。
data-*属性はHTMLとスクリプト間でデータの受け渡しがしやすいように追加されたグローバル属性です。
*部分には自由に名前を設定して（命名規則はありますが）利用できます。
https://developer.mozilla.org/ja/docs/Web/HTML/G …

この属性へスクリプトからアクセスする場合は、要素のdataset属性を窓口として、*部分に関しててはキャメルケースの命名則に変えてアクセスするということになっています。
https://developer.mozilla.org/ja/docs/Web/API/HT …
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん
さらに詳しい内容、ありがとうございます。

タイトル列と言うのはテーブルの行ヘッダーにタイトル書いてあって、その下に縦型で並んでいる項目の列です。
私の例では「あ行」、「か行」、など。

ハイパーリンク付けたいのは、そのタイトルの<td>のみで、テーブル全体ではなく、各行のタイトルの上クリックした時にsubmit先のphpファイルへ遷移します。
<td>のcssまで書いてくださったので、これで私がやりたいこと実現できます。

scriptでデータ受け渡しのことも含めて大変勉強になりました。
ありがとうございました。

通報する
お礼日時：2018/10/30 22:46

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは


実際の出力結果の内容が不明なので、方法のサンプルとしての回答になります。

表内のリンク要素は（リンク機能は必要なくなるので）省略しました。
その代わりに、送信したいID（？）は、ひとまずtd要素のカスタムデータ属性に設定しています。（data-id属性の値が送信に使われます）
下のサンプルは、『table内のtdをクリックすると、非表示のフォームのinputにtdのカスタムデータ属性値をセットして送信する』ようにしたサンプルです。

＞あ行のハイパーリンクにクリックした時に～～
※ tableの行単位で送信するデータが変わるのであれば、tdではなくtrのデータ属性を利用することで足りるかもしれません。
※ サンプル中のid等は適当に設定してありますので、適宜修正ください。
※ ご提示のHTMLのままでも（リンク要素あり）当然実現は可能ですが、以下のような内容を追加する必要があるでしょう。
・ブラウザ側のリンク機能を停止する
・リンク要素のhref属性から送信に必要なidを取り出す（→inputにセット）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title></head>
<body>

<table id="hoge" border="1">
<tr>
<td data-id="ID11">Title1-1</td>
<td data-id="ID12">Title1-2</td>
</tr>
<tr>
<td data-id="ID21">Title2-1</td>
<td data-id="ID22">Title2-2</td>
</tr>
</table>

<form id="fuga" action="showDetails.php" method="POST" style="display:none;">
<p>送信用フォーム<input name="key" type="text"></p>
</form>


<script type="text/javascript">
document.getElementById("hoge").addEventListener("click",(e)=>{
let t = e.target, f = document.getElementById("fuga");
if(t.nodeName!="TD") return;
f.elements["key"].value = t.dataset.id;
f.submit();
});
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ujillinさん

サンプル、ありがとうございます。

早速データベースから一覧取得し、foreach loop内で、
<td data-id="ID11">Title1-1</td>を
↓
<td data-id=<?php echo $row["recID"]; ?>><?php echo $row["title"]; ?></td>
しました。

formとjsをコピーして、クリックした行のidを問題なくターゲット先のphpファイルに渡しています。

今回は一覧表示の上、テーブルのタイトル列にハイパーリンクを見せながら、そこをクリックしてshowDetail.phpにクリックした行のIDを渡したいです。
<a href=..>で実現する方法がお分かりであれば助かります。（HTMLのままでも（リンク要素あり）当然実現は可能ですが、、と書いていらっしゃるのでご存知と思います。。）


私自分でトライしたのは、

<td data-id=<?php echo $row["recID"]; ?>>
　　<u><a href="javascript: void(0)"><?php echo $row["title"]; ?></a></u></td>

で、見た目は各行のtitleにunderlineついて、ハイパーリンクも出ていますが、クリックしても何も起こらないです。

その他コメント：
今回、javascriptについても勉強になりました。ありがとうございます。
しかし、副作用でないように最低限のscriptで済ませたいです。

一つ分かりにくいのは、<td>の属性宣言には「data-id」使っていますが、
javascriptの方では、
f.elements["key"].value = t.dataset.id;
で値（ID11、ID12など）を取っています。

「dataset.id」で　「data-id」の値が取得できる、このように、属性名が一致しなくてもとれる？

又はそのような理解は正しくないということでしょうか。

引継ぎよろしくお願いします。

通報する
お礼日時：2018/10/30 12:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報