form外のボタンをクリックしてsubmitさせる方法

【PHP】phpでDB不要のアンケート機能を作成する

f:id:duo-taro100:20160218004611p:plain

form外のボタンをクリックしてsubmitさせる方法

まずは、選択肢と投票ボタンを作成する。
formにはhidden項目を用意しておいて、押されたボタンのテキスト(idでもいいけど)をhidden項目に設定して$_POST変数に渡す。

<?php
// フォームデータを取得
$answer = $_POST['hidden-btn'];
?>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>アンケート</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <h1>どれが好き？</h1>
        <!-- 選択肢 -->
        <p>1,いちご</p>
        <p>2,みかん</p>
        <p>3,りんご</p>
        <button class="question-btn">1</button>
        <button class="question-btn">2</button>
        <button class="question-btn">3</button>
        <!-- アンケートフォーム -->
        <form id="question-form" action="index.php" method="post">
            <input type="hidden" id="hidden-btn" name="hidden-btn" value="">
        </form>
        <!-- 取得した値を画面に表示している -->
        <?php echo $answer; ?>
    </body>
    <script>
        $(function(){
            $('.question-btn').click(function(){
                // フォームを取得する
                var form1 = document.forms['question-form'];
                //
                // バリデーションチェックや、データの加工を行う。
                //

                // 押されたボタンの回答を取得
                // 今回はテキストを取得。
                // idを取得するなら var ans = $(this).attr('id');
                var ans = $(this).text();

                // hidden項目のvalueに値を設定してsubmit
                // 今回は method="post" としているので $_POST変数に以下の値が設定されている
                $('#hidden-btn').val(ans);
                form1.submit();
                return false;
            });
        })
    </script>
</html>