B-Teck!

お仕事からゲームまで幅広く

【PHP/jQuery】form外のクリックイベントを取得し、POST/GETする

JavaScript jQuery PHP

formの外側にある要素に対するクリックイベントを取得し、送信する方法。

下記はクリックされた要素のidを取得し自分自身にPOSTして表示するコード。

<?php
    //POSTされた値を表示
    if (isset($_POST["btnid"])) {
        echo $_POST["btnid"];
    }
    
    unset( $_POST); //POSTの値を削除
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <!--GoogleにホストされているjQueryをロード-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!--ロジック-->
        <script type="text/javascript">
            $(document).ready(function(){
                $(".btn_Click").click(function(){
                    //form名設定
                    var form1 = document.forms["form1"];
                    //attrで発生したイベントのidを取得する
                    //必要ならvalueとかも設定できる
                    //var value = $(this).attr("value");
                    var id = $(this).attr("id");
                    //設定したform内のbtnidに取得したidの値をセットする
                    $("#btnid").val(id);
                    
                    //HTML側で設定してれば不要
                    //form1のmethodを変更(POST・GET)
                    form1.method = "POST";
                    //遷移先の指定(今回は自分自身をclicktest.phpとして設定)
                    form1.action = "clicktest.php";
                    form1.submit();
                    return false;
                });
            });
        </script>

        <!-- テスト用テキスト クリックした要素のidがPOSTされる-->
        <a href="#" class="btn_Click" id="btn_1" value="テスト">クリック</a>
        <a href="#" class="btn_Click" id="btn_2">クリック</a>
        <a href="#" class="btn_Click" id="btn_3">クリック</a>

        <!-- 送信用Form 取得した値を使用するため、初期値は空文字列 -->
        <form name="form1">
            <INPUT type="hidden" id="btnid" name="btnid" value=""/>
        </form>

    </body>
</html>

昔に可変な要素を一箇所でまとめて処理するために書いたような気がするけどあまり覚えてない。
また使う機会があった時用にメモ。