B-Teck!

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

【PHP/jQuery】要素クリック時にformを生成しPOST/GETする

JavaScript jQuery PHP

要素クリック時にformを生成し、送信する方法。

下記はクリック時に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(){
                    //attrで発生したイベントのidを取得する
                    var anc = $(this).attr("id");
                    //form用のHTMLを作成する
                    var form = $('<form></form>',
                                {id:'btnid',action:'clicktest.php',method:'POST'}).hide();
                    //bodyのオブジェクトを取得
                    var body = $('body');
                    //bodyに作成したformを追加する
                    body.append(form);
                    //追加したformにinputを追加する
                    form.append($('<input>',{type:'hidden',name:'btnid',value:anc}));
                    //作成したformでsubmitする
                    form.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>

    </body>
</html>