カテゴリー別アーカイブ: 番外編

クリックしたボタンによる Form の内容変更(2)

前回は Click する Button によって Form 内容の送信先を変更しました。
折角なので今回は、もう一つのよくあるパターンも記載しておきたいと思います。
 # 今回の内容は jQuery だけでは完了しませんので番外編となります。

今回の概要としては、一つの URL でいくつかの処理を分岐させて行う場合の処理です。
よくある使い方として「入力画面」「確認画面」「完了画面」を出しわける場合になります。
主に自作のメールフォームなどを作成する場合ですね。
 # 完了画面の場合は送る必要は無いありませんが、その辺は php などで処理して下さい(笑)

上記の場合、基本的には入力フォームの内容は変わらないことが多いです。
そのため、現在の画面状況をデータとして送る必要があります。
今回は「確認画面」での「戻る」「送信」のボタン制御を想定しています。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('button').click( function() {

                    var getID;
                        getID = $(this).attr('id');

                    var targetFrom;
                        targetFrom = $('#targetForm');

                    var mode;
                        mode = $('#formMode');

                    var targetURL;
                    switch ( getID ) {
                        case 'send':
                            mode.val('complete');
                            break;
                        case 'confirm':
                            mode.val('confirm');
                            break;
                        case 'input':
                        default:
                            mode.val('input');
                            break;
                    }

                    targetFrom.submit();

                });

            });


        --></script>

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

            div {
                margin     : 10px;
            }

            dt {
                margin-top : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <form id="targetForm" action="./sample_1523.html" method="get">
                <input type="hidden" id="formMode" name="mode" value="send">
                <dl>
                    <dt>Name</dt>
                    <dd><input type="text" name="sample1"></dd>
                    <dt>Title</dt>
                    <dd><input type="text" name="sample2"></dd>
                    <dt>Message</dt>
                    <dd><input type="text" name="sample3"></dd>
                </dl>
            </form>

            <div id="button_area">
                <button id="input">Back</button>
                <button id="send">Send Mail</button>
            </div>

        </div>
    </body>
</html>

sample

sample の中には Button が二つありますが、click した Button によって mode を
切り替えています。
 # 実際には php などで mode によって出力内容を作成する必要があります。

メールフォームの場合は「入力画面」に戻る場合も「完了画面」に進む場合にも同じ内容を
入力しないといけません。
間違いが発生することを避けるためにも Form に関しては一つにする必要があります。
その点を考慮すると意外と使用頻度が高いのでは無いかと思いますがいかがでしょうか。

なお、今回はわかりやすいように method を GET にしておりますが、
実際には POST 送信に変更する必要があります。

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

動画の読込(番外編)

今回は備忘録として残しておきます。
動画の表示について業務で失敗したので、改めて間違えないようにです。
そのため今回は sample も無しです。

<video id="movie" src="http://~~~/sample.mov" autoplay loop></video>
    $('#movie').addEventListener('canplaythrough', function(){
        実行ファンクション();
    }, true);

上記の様な形で movie を表示している div があります。
この div(movie) に対して発生する特定のイベントが取得したいのですが
実行ファンクションが動作してくれません。

    document.getElementById('movie').addEventListener('canplaythrough', function(){
        実行ファンクション();
    }, true);

色々調べたんですが上記の形に落ち着きました。
どうやら幾つかのものに関しては jQuery だけでは操作できないようですね。
.get(0) などを使用して無理やり jQuery で操作できるようにすることも可能だそうですが、
余り利点も無いようなので DOM での操作を使用と思います。

それにしても 気をつけないといけませんね。
jQuery で操作できないものは一覧でもあれば良いですね。

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

(番外編)郵便番号から住所を取得する。

今回は jQuery だけでは完結していないので番外編となっています。
近いうちに仕事で使いそうな処理の予習です。

まぁ、内容は非常に簡単です。
■郵便番号を入力してからボタンを押すと、県(Select)と県名を除く住所(Input)の中身を取得する。

こんな場合の強い味方は ajax となります。
なお、jQuery だけで行う方法もありますが、今回は仕事の予習のため PHP を使用します。
といっても、このブログは jQuery の備忘録なので PHP の処理は省いて記事を記載しています。
というか PHP 部分はまだ作って無いので書けません(笑)
※ jQuery だけで行う方法(getJSON)に関しては、掲載要望があるか、私の気が向いたら書くかもしれません。

<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 funcSetAddress() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'json',
                    url      : 'sample_608.txt',
                    data     : {
                                 zip1 : $('#zip1').val,
                                 zip2 : $('#zip2').val
                               }
                }).done(function(data) {
                    // ajax ok
                    $('#pref').val(data[0].prefcode);
                    $('#addr').val(data[0].citydata);
                }).fail(function(data) {
                    // ajax error
                    alert('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>
        <div id="zip_area">
            <h1>zip code</h1>
            <input id="zip1" name="zip1" value="522" readonly="readonly"> - <input id="zip2" name="zip2" value="0052" readonly="readonly">
            <input type="button" onclick="funcSetAddress();" value="zip -> addr">
        </div>
        <div id="addr_area">
            <h1>addr code</h1>
            <select id="pref" name="pref">
                <option value="">none select</option>
                <option value="1">pref1</option>
                <option value="2">pref2</option>
                <option value="3">pref3</option>
                <option value="4">pref4</option>
                <option value="5">pref5</option>
            </select>
            <input id="addr" name="addr">
        </div>

    </body>
</html>

sample

まず、郵便番号を入力して変更用のボタン「zip -> addr」をクリックします。
※今回の sample では郵便番号の値は変更できませんが、本番ではもちろん変更可能にします。

クリックすると、ajax にて特定のページに 郵便情報を送信します。
まぁ、郵便番号をもとに PHP で住所情報を取得するわけですが、今回の注目する個所は dataType の設定です。
以前に「ajaxで画面遷移なしに表示切替」でも、さらっと書きましたが、ajax で情報を取得する場合には
dataType の値を変更することで 取得できる形式が変わります。

今回は dataType として JSON を指定しています。
jQuery を使用して、複数の情報を取得する場合はやっぱり JSON データが便利ですね。
今回は情報取得に PHP を使用する予定なので1件分の情報しか取得しませんが、getJSON を使用する場合は必須ですね。

ちなみに今回の sample では以下の JSON データを受け取ることを想定しています。(sample_608.txt の中身です。)

[{"prefcode":"3","citydata":"city_address"}]

ajax で正常に情報が受け取れた場合には、json の内容を分割して対象の内容を変更しています。
なお、data[0].prefcode の 0 はデータの件数になるため忘れ内容にしましょう。

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

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