フォームに内容を追加して送信

今回は Form に対して内容を追加して送信する方法をやってみます。
個人的には地味ながら便利な機能だと思って良く利用しています。
 ※ 「こうしたほうが良い」と言う話があればぜひ教えて下さい。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('.submit').click( function() {
                    $('#base_form').append('<input type="hidden" name="' + $(this).attr('key') + '" value="' + $(this).attr('data') + '" />').submit();
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin          : 5px;
                padding         : 5px;
            }

            #form_area {
                width           : 200px;
                border          : 1px solid #000000;
            }

            .submit {
                padding         : 5px;
                width           : 170px;
                border          : 1px solid #000000;
                cursor          : pointer;
            }

        --></style>

    </head>

        <div id="form_area">
            <h1>Form Area</h1>
            <form id="base_form" action="" method="get">
                <input type="text" name="text" value="DefaultData">
            </form>
        </div>

        <div id="disp_area">
            <h1>Button Area</h1>
            <p id="submit1" class="submit" key="addData" data="A">Submit Field Data Is "A"</p>
            <p id="submit2" class="submit" key="addData" data="B">Submit Field Data Is "B"</p>
            <p id="submit3" class="submit" Key="addData" data="C">Submit Field Data Is "C"</p>
        </div>

    </body>
</html>

sample

spmple 中には Form が一つ存在しています。
また、それとは別に button(と言うか文字列領域)が 3 個表示されています。
jQuery で制御を行うため input, submit, button である必要はありません。
ただ、ロールオーバーやカーソル変更が無いと操作対象かが判りにくいところもあります。

button を click することで Form に特定の要素を追加して送信します。
今回は確認しやすいように Method は「GET」形式にしています。
送信結果の確認は手抜きのため URL を見て確認して下さい(笑)

リスト一覧などで特定の ID 以外同じものを送信する場合などに便利ですね。
この手順であれば、追加できる項目は複数にも出来ますし、Form の配置に悩むこともありません。
便利なので今後のためにも備忘録的に残しておこうと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です