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

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

ただいまの
回答率

87.59%

AタグでPOSTする方法

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,166

score 9

いつも参考にさせていただいております。
Twitterのフォロー・フォロワーのようにユーザー一覧を表示し、クリックするとそのユーザーの詳細が表示されるような仕組みを作りたく試行錯誤しています。
DBの中身を一覧表示することと、次のページにPOSTする仕組みまでは独学ながらも理解したのですが
https://qiita.com/next1ka2u/items/9736ce2f9c7f3aa69d61
今回上記のサイトを参考にしてjavascriptとAタグを利用したPOSTを実装しようとしたところ、なかなかうまくいきません。
今の状態ではform[0]の内容だけがPOSTされているのは理解しているのですが、配列を使ってそれ以降をPOSTするにはどうしたら上手くいくでしょうか。
初めて質問させていただきますが、どなたかお答えいただければ幸いです。

<?php
if ($result = mysqli_query($link, 'SELECT * FROM member WHERE '.$shop.' = shop ORDER BY sort')) {
?>
<ul class="list-group sortable">
<?php
while ($row = mysqli_fetch_assoc($result)) {
echo '<form action="staffsetting.php" method="POST" name="sampleform"><input type="hidden" name="id" value="' . $row['id'] .'"><li class="list-group-item" id=item-' . $row['id'] .'><div align="left"><a href="#" onclick="javascript:document.forms.sampleform.submit();return false;"><img src="upfiles/'.$row['images'].'" class="thumbnail-a img-responsive">' . $row['account'] . '</a></div></li></form>';
}
?></ul>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

aタグを分だらformをサブミットするようjavascriptを組めばよいでしょうけど
aタグやめてlabelでやればjavascriptいらないかも

.anchor{text-decoration:underline;color:blue;}
.anchor:hover{color:red;}
<label for="sbmt" class="anchor">ほげ</label>
<form method="post">
<input type="text" name="hoge" value="1">
<input type="submit" value="go" id="sbmt">
</form>

 追記

フォームを表示しない

<style>
.anchor{text-decoration:underline;color:blue;}
.anchor:hover{color:red;}
#f1{position:absolute;top:-9999px;}
</style>
<label for="sbmt" class="anchor">ほげ</label>
<form method="post" id="f1">
<input type="text" name="hoge" value="1">
<input type="submit" value="go" id="sbmt">
</form>
<?PHP
print_r($_POST);
?>

 javascriptバージョン

<style>
#f1{position:absolute;top:-9999px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector("#a1").addEventListener('click',function(e){
    e.preventDefault();
    document.querySelector("#f1").submit();
  });
});
</script>
<a href="#" id="a1">ほげ</a>
<form method="post" id="f1">
<input type="text" name="hoge" value="1">
</form>
<?PHP
print_r($_POST);
?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/05 13:15

    そちらも試してみましたが、結果は同じのようです。
    Javascriptでの方法も模索してみます。

    キャンセル

  • 2018/09/05 13:21 編集

    追記しました(ついでなのでjsバージョンも)

    キャンセル

  • 2018/09/05 13:36

    沢山ご回答頂きありがとうございます。1つ1つ検証してみたいと思います。

    キャンセル

checkベストアンサー

0

jQueryならこんな感じ。

  $('aタグのid').click( function() {
    $('フォームのid').submit();
  } );

 追記

やりたい動き的には '''<form id="form_a1"><a id="a1"></a></form>''' みたいなくくりで数字部分をインクリメントして繰り返しという形だと思うので、

  $('a').click( function() {
        // id指定
        var submitform = '#form_' + $(this).attr('id')
        $(submitform).submit();

        // name指定
        var submitformN = 'form[name="form_' +  $(this).attr('id') + '"]'
        $(submitformN).submit();
  } );


という感じ?(違ったらご指摘ください)
普通の<a>タグもあるだろうから、$('a')の部分は$('.クラス名')にしてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/05 14:21

    ご回答ありがとうございます。
    いくつか方法を調べているとsampleformの名前をsampleform[0],sampleform[1],sampleform[2]...と自動で変更されるようなコードを書くのが最適なようなのですが、お答えいただいた方法だとsampleform(フォームのidの部分)だけが送信されませんか…?

    キャンセル

  • 2018/09/05 14:59

    名前での指定もできますよ。
    追記したのでご確認ください。
    ただ、そもそもidは一意なので、idを使用したほうが良いような気はします。

    キャンセル

  • 2018/09/05 21:13

    無事に機能を実装出来ました。htmlでのidとJQueryでのidの繋がりでつまづいたのですが、自分で書いた<li>内のidの書き方がヒントとなりました。
    見た目を崩さずにすぐ適用できましたのでBAとさせて頂きます。

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る